skills.rest
71261121
71261121COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Transforms UI style requirements into frontend code using token-first design and WCAG AA accessibility standards.

Updated Dec 14, 2025
Search Tags:#typescript#accessibility#react#design system#tailwind css#frontend development#ui design
One-click install
npx skills add https://github.com/71261121/auto-jarvis- --skill frontend-design-71261121
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/71261121/auto-jarvis-/tree/main/skills/frontend-design
Command: npx skills add https://github.com/71261121/auto-jarvis- --skill frontend-design-71261121

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill transforms vague UI style requirements into executable, production-grade frontend code, ensuring visual consistency, accessibility compliance, and maintainability.

Core Features & Use Cases

  • Systematic Design: Enforces a tokens-first methodology for consistent spacing, typography, and colors.
  • Accessibility Compliance: Ensures WCAG AA standards are met, including keyboard navigation and ARIA attributes.
  • Creative Execution: Encourages unique aesthetic choices beyond generic AI patterns.
  • Use Case: When a user asks to "build a modern, premium SaaS dashboard," this Skill provides the structure, components, and guidelines to deliver a high-quality, accessible, and visually distinct UI.

Quick Start

Use the frontend-design skill to build a team dashboard using React, Tailwind CSS, and shadcn/ui.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-ready React components using design tokens?▼

Building production-ready React components using design tokens involves applying a tokens-first methodology for consistent spacing, typography, and colors, ensuring visual consistency and maintainability across your web application.

What is a tokens-first methodology in frontend development?▼

In frontend development, a tokens-first methodology systematically enforces predefined variables for spacing, typography, and colors, transforming vague UI style requirements into executable and maintainable code.

Can I use Tailwind CSS with this tokens-first UI design approach?▼

You can use Tailwind CSS with a tokens-first UI design approach to integrate flexible tech stacks, allowing systematic style application while building websites, web applications, and dashboards.

How do I ensure WCAG AA accessibility compliance in a React dashboard?▼

Ensuring WCAG AA accessibility compliance in a React dashboard requires implementing keyboard navigation and ARIA attributes systematically, meeting required standards for accessible frontend code execution.

What is the best way to generate unique UI designs for SaaS applications?▼

Generating unique UI designs for SaaS applications is best achieved through creative execution that encourages unique aesthetic choices beyond generic AI patterns while maintaining a systematic design system.

Does this frontend development approach support Vue components?▼

This frontend development approach supports Vue components, applying systematic design tokens and accessibility compliance to build production-ready web applications across flexible tech stack integrations.

Related Skills

Explore More Design & Creative Skills→
QvvvvvvQQvvvvvvQ
25

frontend-design

Transform UI style requirements into frontend code with design tokens and Tailwind CSS.

Community
Advanced
wukangcheng2944wukangcheng2944

impeccable

Create production-grade frontend interfaces from design briefs.

Community
Advanced
Cao-RCao-R

frontend-design

Transform UI style requirements into React and TypeScript code using design tokens.

Community
Advanced
C-Jay69C-Jay69

frontend-design

Generate accessible React/TypeScript components with design tokens and dark mode.

Community
Advanced