skills.rest
ngocsangyem
ngocsangyemCOMMUNITY
Explore all skills by this author →
𝕏@ngocsangyemGitHub

meow:frontend-design

Enforce accessibility, typography, and visual system standards in frontend design reviews.

14|2|Updated Mar 25, 2026
Search Tags:#typography#accessibility#frontend#tokens#ui-design#design-system#design-review
One-click install
npx skills add https://github.com/ngocsangyem/MeowKit --skill meow-frontend-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: meow:frontend-design
Source: https://github.com/ngocsangyem/MeowKit/tree/main/.claude/skills/meow%3Afrontend-design
Command: npx skills add https://github.com/ngocsangyem/MeowKit --skill meow-frontend-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Produces consistent, accessible UI outcomes by enforcing typography, color, spacing, and motion rules across frontend design tasks, reducing design debt and human error.

Core Features & Use Cases

  • Automated UI review: checks typography hierarchy, color contrast, spacing scales, and motion usage against design-system rules.
  • Design-token enforcement: validates tokens for theming, responsive behavior, and consistent component styling.
  • Use Case: design-system review for a new component, accessibility audit for a UI patch, or design-token updates across a suite of components.

Quick Start

Describe your frontend design task in a single sentence to activate the skill.

Frequently Asked Questions about meow:frontend-design

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

FAQPage Schema
How do I automate a frontend design review for typography and color contrast?▼

Automate a frontend design review by loading your design rules and tokens to check typography hierarchy, color contrast, spacing scales, and motion usage, generating a review-ready spec for engineering teams.

What is design-token enforcement for UI components?▼

Design-token enforcement validates tokens for theming and responsive behavior, ensuring consistent component styling across frontend projects while reducing design debt and human error.

Can I use this to check WCAG-compliant color contrast for web accessibility?▼

Yes, you can check WCAG-compliant color contrast by loading your design rules, allowing the system to validate visual standards and output an accessibility audit spec for UI patches.

How do I audit a design system for spacing and motion consistency?▼

Audit a design system for consistency by applying the skill to validate spacing scales and motion usage against your loaded design rules, producing a review-ready spec for component updates.

What do I need to load before checking my frontend design tokens?▼

You need to load your design rules and tokens before checking frontend components, as the system requires these inputs to enforce visual standards and output a review-ready spec.

Are there limitations when enforcing visual system standards across app projects?▼

The main limitation is the dependency on loaded design rules and tokens; without providing these inputs, the system cannot validate visual system standards or output a review-ready spec.

Related Skills

Explore More Design & Creative Skills→
davpatel605-beepdavpatel605-beep

design-md

Create and validate DESIGN.md design token specification files with YAML front matter.

Community
Intermediate
mewomewoliumewomewoliu
1

design-engineer

Translate Figma design intent into production-ready React components with design tokens.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate