skills.rest
wyattowalsh
wyattowalshCOMMUNITY
Explore all skills by this author →
Website𝕏@wyattowalshGitHub

frontend-designer

Design, scaffold, refactor, and audit React frontend codebases with Tailwind CSS v4 and shadcn/ui.

4|1|Updated Jan 26, 2026
Search Tags:#ui#frontend#react#css#component#shadcn/ui#tailwind
One-click install
npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer-wyattowalsh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-designer
Source: https://github.com/wyattowalsh/agents/tree/main/skills/frontend-designer
Command: npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer-wyattowalsh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation and modernization of frontend interfaces using React, Tailwind CSS v4, and shadcn/ui, ensuring production-grade quality and adherence to modern best practices.

Core Features & Use Cases

  • Scaffold New Projects: Quickly set up new frontend projects with a robust stack (Vite, Next.js, or Remix).
  • Component Creation: Design and build individual UI components with accessibility and responsiveness in mind.
  • Theme Configuration: Manage and update design tokens for consistent theming across the application.
  • Code Refactoring: Modernize existing frontend codebases to adopt current standards.
  • Code Auditing: Perform read-only analysis of frontend code quality without making changes.
  • Use Case: You need to build a new user authentication form using React and Tailwind CSS. This Skill can scaffold the project, create the form components, and ensure they are accessible and responsive.

Quick Start

Use the frontend-designer skill to scaffold a new React project named 'my-app'.

Frequently Asked Questions about frontend-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a new React project with Tailwind CSS and shadcn/ui?▼

To scaffold a new React project with Tailwind CSS and shadcn/ui, use this Skill to quickly set up a robust stack across Vite, Next.js, or Remix frameworks. It automates project initialization to ensure production-grade quality and modern best practices.

Can I modernize an existing React codebase to use Tailwind CSS v4?▼

Yes, you can modernize an existing React codebase to use Tailwind CSS v4. This Skill performs code refactoring to update your project with modern CSS patterns like container queries and current accessibility standards.

What is the best way to manage theming and design tokens in a React application?▼

The best way to manage theming in a React application is by using CSS custom properties for design tokens. This Skill configures and updates these tokens to ensure consistent theming across your entire user interface.

How do I build accessible UI components using React and shadcn/ui?▼

To build accessible UI components using React and shadcn/ui, this Skill designs and creates individual elements with responsiveness and accessibility standards in mind. It ensures your components meet production-grade quality requirements.

Does this frontend design tool support both Next.js and Remix frameworks?▼

Yes, this frontend design tool supports both Next.js and Remix frameworks. It manages component creation, theming, and project setup seamlessly across Vite, Next.js, and Remix.

How do I audit frontend code quality without making changes to the files?▼

To audit frontend code quality without making changes, this Skill performs a read-only analysis of your codebase. It evaluates your React and Tailwind CSS implementation against modern standards safely without modifying any files.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
SZolothSZoloth
11

frontend-design

Design and implement frontend interfaces from user requirements with HTML/CSS/JS.

Community
Intermediate
caffeinelabscaffeinelabs

extension-authorization

Enforce role-based access control in Motoko canisters and React front-ends.

Official
Advanced
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced