skills.rest
ChrstprJohn
ChrstprJohnCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Defines frontend design direction including typography, color, spacing, and accessibility for web apps and design systems.

6|Updated Mar 1, 2026
Search Tags:#typography#design#ui#accessibility#frontend#aesthetics#design-system
One-click install
npx skills add https://github.com/ChrstprJohn/SamsonDentalCenter --skill frontend-design-chrstprjohn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ChrstprJohn/SamsonDentalCenter/tree/main/.agent/skills/Frontend/frontend-design
Command: npx skills add https://github.com/ChrstprJohn/SamsonDentalCenter --skill frontend-design-chrstprjohn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to align on a cohesive, distinctive UI direction that is both aesthetically expressive and technically deliverable.

Core Features & Use Cases

  • Establishes a strong design direction (e.g., editorial brutalism, luxury minimal) and translates it into concrete, production-ready UI guidelines for code, typography, color, and spacing.
  • Guides designers and developers through feasibility checks, performance considerations, and accessibility constraints to ensure consistent implementation across screens and components.
  • Useful for design systems, component libraries, and web apps needing a unique visual identity that stays coherent at scale.

Quick Start

Define and apply a distinctive frontend design direction to a sample page to establish the visual identity.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I establish a distinctive frontend UI design direction for a web app?▼

Establish a distinctive frontend UI design direction by defining aesthetic styles like editorial brutalism or luxury minimal, then translating them into concrete, production-ready guidelines for typography, color, and spacing. This ensures end-to-end quality and visual identity at scale.

What is the best way to align designers and developers on a production-grade design system?▼

Align designers and developers on a production-grade design system by applying guidelines that guide feasibility checks, performance considerations, and accessibility constraints, ensuring consistent implementation across screens and components.

How do I ensure frontend accessibility and feasibility constraints are met in my UI design?▼

Ensure frontend accessibility and feasibility constraints are met by applying a design direction that satisfies specific requirements for accessibility, performance, and implementation standards to deliver end-to-end quality across web interfaces.

Can I use this approach to define typography and color guidelines for a component library?▼

Yes, you can use this approach to define typography, color, and spacing guidelines for component libraries and web apps needing a unique visual identity that stays coherent at scale across all screens.

What are the limitations of applying a unique visual identity across a large web application?▼

Limitations of applying a unique visual identity involve balancing aesthetic expressiveness with technical deliverability, requiring teams to navigate feasibility checks and implementation standards to maintain coherence across a large web application.

Related Skills

Explore More Design & Creative Skills→
ViewWayViewWay

frontend-design

Defines visual identity and generates frontend code with specified typography, color, and motion constraints.

Community
Advanced
hotriluanhotriluan

ck:frontend-design

Convert design inputs into HTML, CSS, and JS with reusable UI components.

Community
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
act70255act70255

frontend-design

Design distinctive frontend interfaces with intentional design systems and functional code.

Community
Advanced