skills.rest
pounct
pounctCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate React, Vue, Svelte, or HTML/CSS frontend code with design tokens and Tailwind CSS.

Updated Mar 13, 2026
Search Tags:#React#design system#Tailwind CSS#frontend development#UI components
One-click install
npx skills add https://github.com/pounct/agent-ebauche1 --skill frontend-design-pounct
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/pounct/agent-ebauche1/tree/main/skills/frontend-design
Command: npx skills add https://github.com/pounct/agent-ebauche1 --skill frontend-design-pounct

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-dom, @tailwindcss/forms, @tailwindcss/typography, @types/react, @types/react-dom, autoprefixer, clsx, postcss, tailwind-merge, tailwindcss, typescript, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill transforms UI style requirements into production-ready frontend code, ensuring consistency, accessibility, and maintainability.

Core Features & Use Cases

  • Systematic Design Tokens: Provides a comprehensive set of design tokens for colors, typography, spacing, and more.
  • Component Development: Includes implementation examples for buttons, inputs, cards, and more with full TypeScript support.
  • Page Assembly: Offers guidelines for composing pages from components with responsive design considerations.
  • Accessibility: Ensures WCAG AA compliance for accessibility and keyboard navigation.

Quick Start

Initialize the skill by running the following command in your project directory: npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && cp templates/tailwind.config.js . && cp templates/globals.css src/globals.css

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build React UI components with a systematic design token approach?▼

Building React UI components with systematic design tokens involves managing colors, typography, and spacing centrally. This framework provides a comprehensive token set and TypeScript component examples to ensure maintainability and consistency across your web application.

What's the best way to set up Tailwind CSS for a React design system?▼

Setting up Tailwind CSS for a React design system requires initializing configuration files and dependencies. You can quickly start by installing tailwindcss, postcss, and autoprefixer, then copying the provided tailwind.config.js and globals.css templates into your project directory.

Can I use this frontend development framework with Vue or Svelte?▼

Yes, you can use this frontend development framework with Vue, Svelte, or vanilla HTML/CSS. While it includes TypeScript support and React dependencies, its systematic design token management and responsive page assembly guidelines apply broadly to modern web applications.

How does this approach handle accessibility and keyboard navigation?▼

This approach ensures accessibility and keyboard navigation by enforcing WCAG AA compliance. It integrates these standards directly into the component development and page assembly guidelines, ensuring your generated frontend code remains accessible.

Does this framework work with TypeScript for component development?▼

Yes, this framework works with TypeScript for component development. It includes full TypeScript support and type definitions for React DOM, ensuring your buttons, inputs, and cards have strict type checking and maintainable code.

Related Skills

Explore More Software Engineering Skills→
bcwgamesbcwgames

package-management

Install and manage language runtimes, packages, and system dependencies.

Community
Intermediate
cloudofgeorgecloudofgeorge

design-html

Convert design mockups into semantic HTML and responsive CSS.

Community
Intermediate
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced
marjan-ahmedmarjan-ahmed

frontend-designer

Provides guidance for building responsive Angular apps with lazy loading and RxJS-powered data access.

Community
Basic