skills.rest
eesha000009-dev
eesha000009-devCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Transform UI requirements into token-driven frontend code with CSS custom properties and TypeScript components.

1|Updated Aug 3, 2025
Search Tags:#typescript#accessibility#frontend#react#tailwind#design-system#design-tokens
One-click install
npx skills add https://github.com/eesha000009-dev/Exam-Prep100 --skill frontend-design-eesha000009-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/eesha000009-dev/Exam-Prep100/tree/main/skills/frontend-design
Command: npx skills add https://github.com/eesha000009-dev/Exam-Prep100 --skill frontend-design-eesha000009-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts vague design briefs, mockups, or stylistic requests into production-ready frontend code that is consistent, accessible, and maintainable, removing the gap between visual direction and implementable UI components.

Core Features & Use Cases

  • Tokens-first design system: semantic CSS variables, spacing, typography, radius, shadows, and motion scales to enforce consistency across components and pages.
  • Production examples: copy-paste-ready CSS and TypeScript implementations including a theme provider, component library, and Tailwind integration to accelerate development.
  • Accessibility & QA: WCAG AA guidance, state coverage (loading/empty/error), keyboard navigation, and a self-review checklist to meet production standards.
  • Use Cases: building dashboards, landing pages, design systems, converting Figma or mockups to React/TypeScript components, and implementing dark/light theme support.

Quick Start

Create a responsive React + TypeScript page in Minimal Premium SaaS style using the provided design tokens, components, and theme provider.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I convert UI mockups into production-ready React and TypeScript code?▼

Implementing design tokens involves defining semantic CSS custom properties for spacing, typography, radius, shadows, and motion scales. This enforces visual consistency across frontend components and pages before writing component logic.

Can I build a dashboard with light and dark theme support using a tokens-first approach?▼

Yes, this approach supports WCAG AA accessibility compliance by providing guidance on color contrast, keyboard navigation, and comprehensive UI state coverage including loading, empty, and error states.

What is the best way to set up a design system using CSS custom properties and Tailwind?▼

The prerequisite is a UI specification or mockup detailing visual requirements. You need a React and TypeScript environment to generate production-ready components, a theme provider, and CSS custom properties.

How do I ensure my frontend components meet WCAG AA accessibility standards?▼

To meet WCAG AA accessibility standards, generate frontend code with built-in contrast guidance, keyboard navigation support, state coverage for loading and errors, plus a self-review checklist to validate compliance.

Does this frontend design approach work for creating a component library?▼

Yes, this frontend design approach works for creating a component library by generating copy-paste-ready CSS and TypeScript implementations with consistent design tokens, theme provider integration, and WCAG AA compliance.

Related Skills

Explore More Design & Creative Skills→
UiPathUiPath
18

apollo-prototype

Build React 19 TypeScript Tailwind CSS 4 UI mockups with Apollo Wind semantic tokens and shadcn components.

Official
Intermediate
louisbrulenaudetlouisbrulenaudet
18

review-ui

Audit React frontend applications for WCAG 2.2 AA compliance and Tailwind CSS theme consistency.

Community
Intermediate
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate
p-o-ke-naep-o-ke-nae

design-system-patterns

Build design system foundations with tokens, theming, and component architecture.

Community
Advanced