frontend-design

Design scalable frontend UI components and architecture across React, Next.js, Angular, and Tailwind.

3|4|Updated Mar 20, 2026

Search Tags:#ui #performance #accessibility #frontend #components #design-system #responsive-design

Ready to run

npx skills add https://github.com/jamestorrevillas/dev-skills --skill frontend-design-jamestorrevillas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jamestorrevillas/dev-skills/tree/main/.github/skills/frontend-design
Command: npx skills add https://github.com/jamestorrevillas/dev-skills --skill frontend-design-jamestorrevillas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the creation of scalable frontend architectures and reusable UI components, ensuring accessibility, performance, and design-system consistency across projects.

Core Features & Use Cases

Component-driven architecture guidance for frameworks such as React, Next.js, Angular, and Tailwind projects.
Styling system guidance with design tokens, typography strategy, responsive design, and accessibility compliance.
Performance optimization practices, core web vitals targets, and server/client component guidance for modern web apps.
Use Case: Build a reusable Button and Card system that adapts to theme changes while maintaining accessibility and performance.

Quick Start

Create a reusable, accessible React component that adheres to a design system.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

What is component-driven architecture and how do design tokens work in frontend design systems?▼

Component-driven architecture uses design tokens to maintain styling system consistency across reusable UI components, allowing scalable frontend architectures to adapt to theme changes while preserving accessibility.

Does this approach work with Next.js, Angular, and Tailwind projects?▼

Yes, this approach works with Next.js, Angular, and Tailwind by providing framework-specific guidance for server/client components, typography strategy, and responsive design.

How do I create a reusable Button and Card system that adapts to theme changes?▼

Create a reusable Button and Card system by utilizing design tokens for styling, ensuring responsive design and accessibility compliance are maintained during theme adaptations.

What's the best way to structure scalable frontend UI components for modern web apps?▼

The best way to structure scalable frontend UI components is adopting a component-driven architecture with design tokens, ensuring accessibility checks and performance targets are satisfied.