skills.rest
lchenrique
lchenriqueCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design React and Next.js interfaces with semantic tokens and responsive styling.

Updated Jan 20, 2026
Search Tags:#accessibility#react#tailwind#ui-ux#design-system#frontend-design
One-click install
npx skills add https://github.com/lchenrique/politron-ide --skill frontend-design-lchenrique
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/lchenrique/politron-ide/tree/main
Command: npx skills add https://github.com/lchenrique/politron-ide --skill frontend-design-lchenrique

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of designing distinctive, production-grade frontend interfaces by enforcing a cohesive design system, semantic tokens, and accessible, responsive UI patterns.

Core Features & Use Cases

  • Design System Enforcement: Implement and apply semantic tokens for colors, typography, spacing, and components across projects.
  • UI Component Crafting: Build polished React components and pages that align with a chosen aesthetic direction.
  • Real-world Scenarios: Create dashboards, forms, landing pages, and complete interfaces with cohesive styling and accessibility.

Quick Start

Use the frontend-design skill to craft a branded React component that demonstrates a card with responsive layout and accessible contrast.

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-grade React components with a cohesive design system?▼

Production-grade React components require enforcing a cohesive design system with semantic tokens for colors, typography, and spacing. This approach ensures your UI components, pages, and dashboards maintain consistent, accessible, and responsive styling across your project.

What are semantic tokens in frontend UI design and when do I need them?▼

Semantic tokens in frontend UI design are variables mapping styling intent like color or spacing rather than raw values. You need them when building distinct web components, dashboards, or full apps to enforce a cohesive design system and ensure accessible, responsive interfaces.

Can I use Tailwind to build accessible and responsive web components?▼

Yes, you can use Tailwind to build accessible and responsive web components. By applying semantic tokens and a cohesive design system, Tailwind helps style branded React components, pages, and complete interfaces while maintaining accessible contrast and responsive layouts.

What's the best way to create a branded React component with accessible contrast?▼

The best way to create a branded React component with accessible contrast is to apply a cohesive design system using semantic tokens. This method enforces accessible, responsive styling patterns directly within your React or Next.js stack for production-grade interfaces.

Does this frontend design approach work with Next.js dashboards and forms?▼

Yes, this frontend design approach works with Next.js dashboards and forms. It enables you to build and style complete real-world interfaces across React and Next.js stacks by applying a cohesive design system, semantic tokens, and accessible UI patterns.

Related Skills

Explore More Design & Creative Skills→
bRRRITSCOLDbRRRITSCOLD
2

design-theming

Derive and apply design themes from a base token file with per-brand JSON overrides.

Community
Intermediate
vercel-labsvercel-labs
5.8k

frontend-design

Generate production-grade UI code from vague frontend requirements.

Official
Advanced
paopp2paopp2

tailwindcss

Apply Tailwind CSS utility classes for responsive, themed UI styling.

Community
Intermediate
ic-facetic-facet

web-design-guidelines

Review UI code against Web Interface Guidelines for compliance.

Official
Basic