skills.rest
Catsofsuffering
CatsofsufferingCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Audit frontend UI aesthetics, accessibility, motion, and performance.

5|1|Updated Apr 8, 2026
Search Tags:#typography#accessibility#audit#ui-ux#design-system#motion#frontend-design
One-click install
npx skills add https://github.com/Catsofsuffering/CCGS --skill frontend-design-catsofsuffering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Catsofsuffering/CCGS/tree/main/templates/skills/domains/frontend-design
Command: npx skills add https://github.com/Catsofsuffering/CCGS --skill frontend-design-catsofsuffering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a rigorous, production-focused frontend design playbook to prevent generic AI-generated aesthetics and accelerate design-to-implementation quality for product UI teams. It eliminates guesswork by enforcing context gathering, accessible tokens, and repeatable checks so designs are memorable, accessible, and implementable.

Core Features & Use Cases

  • Context-first protocol: Requires explicit design context and stores it via /teach-impeccable before any design work.
  • Comprehensive audits and fixes: Tools and checklists for accessibility, performance, responsive layout, motion, and UX writing via commands like /audit, /critique, /polish, and /harden.
  • Design system outputs: Produces token recommendations, typography scales, OKLCH palettes, component patterns, and style-variant specs (claymorphism, glassmorphism, neubrutalism, liquid-glass).
  • Use Case: Run a full audit on a checkout flow, get prioritized accessibility and performance fixes, then output tokenized CSS and a polish checklist for engineering handoff.

Quick Start

Ask the frontend-design skill to audit the project's UI, apply fixes, and produce a polish checklist.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I audit my UI for accessibility and performance issues?▼

To audit UI for accessibility and performance, you run a comprehensive check evaluating responsive layout, motion, and UX writing. This process identifies prioritized fixes and outputs tokenized CSS for engineering handoff.

How do I generate CSS design tokens and typography scales for a design system?▼

Generating CSS design tokens and typography scales requires explicit project design context. The process outputs OKLCH palettes, component patterns, and style-variant specs like glassmorphism or neubrutalism for production-grade implementation.

What is the best way to prevent generic AI-generated frontend aesthetics?▼

The best way to prevent generic AI-generated frontend aesthetics is to enforce a context-first protocol. Providing rigorous design context before starting ensures outputs are memorable, accessible, and implementable rather than generic.

Can I use this frontend design workflow for a checkout flow polish and critique?▼

Yes, you can use this workflow for a checkout flow polish and critique. It runs comprehensive audits, applies prioritized fixes, and produces a polish checklist along with component tokenization for engineering handoff.

Do I need to provide project design context before generating style variants?▼

Yes, you must provide project design context before generating style variants. The context-first protocol stores explicit design parameters before any work begins, ensuring style-variant specs like claymorphism or liquid-glass match product requirements.

Related Skills

Explore More Design & Creative Skills→
HAR5HA-7663HAR5HA-7663

shape

Plan feature UX and UI through a structured discovery interview.

Community
Intermediate
aiunlocked1412aiunlocked1412
14

web-designer-pro

Generate mobile-first wireframes, design tokens, and developer handoff documentation for web pages.

Community
Advanced
dirnbauerdirnbauer
33

frontend-design

Design frontend interfaces with typography, color palettes, motion, and CSS/HTML examples.

Community
Basic
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced