skills.rest
jamestorrevillas
jamestorrevillasCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/jamestorrevillas/dev-skills --skill frontend-design-jamestorrevillas
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
junchenghuojunchenghuo
3

fe-a11y-performance-audit

Audit frontend web pages for WCAG compliance and Core Web Vitals.

Community
Intermediate
jota-batutajota-batuta

performance-testing

Establish performance baselines and budgets for APIs and web applications.

Community
Advanced
dt418dt418

Docs Pack

Build documentation platforms with versioned docs, search, navigation, code highlighting, and API reference generation.

Community
Intermediate