skills.rest
EdwardLee14
EdwardLee14COMMUNITY
Explore all skills by this author →
GitHub

Frontend Design Skill

Guide React frontend teams to build consistent UI components with CSS Modules.

Updated Apr 6, 2026
Search Tags:#typography#frontend#react#design-system#ui-patterns#css-modules#twilio-crm
One-click install
npx skills add https://github.com/EdwardLee14/ProjectPay --skill frontend-design-skill-edwardlee14
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Design Skill
Source: https://github.com/EdwardLee14/ProjectPay/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/EdwardLee14/ProjectPay --skill frontend-design-skill-edwardlee14

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to maintain a consistent UI across React components, screens, and CSS, leading to visual drift and slower delivery. This Skill codifies a fintech-grade design system inspired by the Twilio CRM pattern to ensure consistency, accessibility, and predictable layouts across dashboards and lists.

Core Features & Use Cases

  • Twilio CRM-inspired layout guidelines (master-detail, sidebar, top nav) and strict color/typography rules.
  • Component patterns: filter pills, list items, tab strips, field grids, info banners, action buttons, and modals.
  • VisiBill-specific mappings and anti-patterns to maintain production-ready UI.

Quick Start

Follow the Twilio CRM frontend design guidelines to implement a master-detail screen for Projects.

Frequently Asked Questions about Frontend Design Skill

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

FAQPage Schema
How do I build consistent React dashboards without visual drift across components?▼

To build consistent React dashboards, apply a fintech-grade design system with strict color and typography rules, standard UI patterns, and CSS Modules to prevent visual drift and ensure predictable layouts.

What is the best way to structure a master-detail screen in a React application?▼

The best way to structure a master-detail screen in React is using Twilio CRM-inspired layout guidelines, which provide standardized sidebars, top navigation, and list item patterns for production-grade interfaces.

Can I use inline Tailwind classes for styling React components in this design system?▼

No, you cannot use inline Tailwind classes. This frontend design system requires adherence to the CSS Modules approach to maintain strict visual consistency and avoid styling conflicts across components.

What UI component patterns are recommended for React list views and settings screens?▼

Recommended UI component patterns for React list views and settings screens include filter pills, tab strips, field grids, info banners, action buttons, and modals, ensuring consistent production-ready interfaces.

How do typography and color rules improve frontend UI consistency in React?▼

Typography and color rules improve frontend UI consistency by codifying specific design tokens and mappings, preventing visual drift across dashboards, and ensuring accessibility across all React components.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
VedaAstroVedaAstro

aggrid-enterprise

Configure AG Grid Enterprise modules, licensing, and grouping in React dashboards.

Community
Advanced
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
lildibbblildibbb

ui-styling

Integrate shadcn/ui components with Tailwind CSS and canvas-based design.

Community
Advanced