·frontend-designer
</>

frontend-designer

✓
wyattowalsh/agentsGitHub: wyattowalsh/agentsSource: wyattowalsh/agents

Build production-grade frontend interfaces with modern React, Tailwind CSS, and shadcn/ui. Five modes: scaffold projects, create components, configure themes and design tokens, refactor styles, and audit codebases. Encodes best practices for React 19 Server Components (framework-dependent), TailwindCSS v4 CSS-first config, shadcn/ui with Radix primitives, modern CSS (container queries, :has(), view transitions, scroll-driven animations), Monaspace typography, and Vite 6. Supersedes the frontend-design skill. Use when building, styling, theming, or improving any frontend project. NOT for backend APIs, database design, DevOps, testing frameworks, state management libraries, routing, or full SSR framework setup.

wyattowalsh·frontend·designer
23Installs·2Trend·@wyattowalsh

Installation

GitHub: wyattowalsh/agents
$npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer

How to Install frontend-designer

Quickly install frontend-designer AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: wyattowalsh/agents.

SKILL.md

View raw

Build production-grade frontend interfaces with modern React, TailwindCSS v4, and shadcn/ui. Five modes from project scaffolding to codebase audit.

Input: $ARGUMENTS — mode keyword + target, natural language UI description, or file path.

| server component | React component rendered on the server; default in Next.js/Remix App Router | "SSR component" | | client component | React component with "use client" directive; runs in the browser | "CSR component" | | design token | CSS custom property holding a design decision (color, spacing, font) | "CSS variable" (too generic) |

Build production-grade frontend interfaces with modern React, Tailwind CSS, and shadcn/ui. Five modes: scaffold projects, create components, configure themes and design tokens, refactor styles, and audit codebases. Encodes best practices for React 19 Server Components (framework-dependent), TailwindCSS v4 CSS-first config, shadcn/ui with Radix primitives, modern CSS (container queries, :has(), view transitions, scroll-driven animations), Monaspace typography, and Vite 6. Supersedes the frontend-design skill. Use when building, styling, theming, or improving any frontend project. NOT for backend APIs, database design, DevOps, testing frameworks, state management libraries, routing, or full SSR framework setup. Source: wyattowalsh/agents.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer
Source
wyattowalsh/agents
Category
</>Dev Tools
Verified
✓
First Seen
2026-02-25
Updated
2026-03-10
URL
https://www.learn-skills.dev/en/skills/wyattowalsh/agents/frontend-designer

Browse more skills from wyattowalsh/agents

Quick answers

What is frontend-designer?

Build production-grade frontend interfaces with modern React, Tailwind CSS, and shadcn/ui. Five modes: scaffold projects, create components, configure themes and design tokens, refactor styles, and audit codebases. Encodes best practices for React 19 Server Components (framework-dependent), TailwindCSS v4 CSS-first config, shadcn/ui with Radix primitives, modern CSS (container queries, :has(), view transitions, scroll-driven animations), Monaspace typography, and Vite 6. Supersedes the frontend-design skill. Use when building, styling, theming, or improving any frontend project. NOT for backend APIs, database design, DevOps, testing frameworks, state management libraries, routing, or full SSR framework setup. Source: wyattowalsh/agents.

How do I install frontend-designer?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/wyattowalsh/agents

Details

Category
</>Dev Tools
Source
skills.sh
First Seen
2026-02-25

Related Skills

honest-review
38 Installs
add-badges
28 Installs
host-panel
27 Installs
orchestrator
25 Installs
skill-creator
25 Installs
mcp-creator
24 Installs