design-system

Name: design-system
Availability: InStock
Author: hackefeller

Enforce Ponti design system tokens, components, and motion rules in React projects.

1|Updated Sep 2, 2019

Search Tags:#accessibility #components #tokens #design-system #gsap #frontend-standards

Ready to run

npx skills add https://github.com/hackefeller/hominem --skill design-system-hackefeller

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/hackefeller/hominem/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/hackefeller/hominem --skill design-system-hackefeller

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Standardizes frontend UI development by enforcing the Ponti Studios design system across codebases, ensuring tokens, motion, accessibility, and consistent component usage.

Core Features & Use Cases

Enforces token-based styling for colors, typography, spacing, elevation, and breakpoints to ensure visual consistency.
Provides canonical references (foundations, motion, components, patterns) to guide implementation and reviews.
Validates and documents component specifications, accessibility requirements, and responsive behaviours to accelerate development.

Quick Start

Install and enable the design-system skill in your project to begin enforcing tokens, components, and motion rules.

Frequently Asked Questions about design-system

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

FAQPage Schema

How do I enforce design tokens for typography and spacing in frontend code?▼

To enforce design tokens in frontend code, apply token-based styling for colors, typography, spacing, and breakpoints. This standardizes visual consistency by validating component implementations against canonical reference materials.

What are frontend standards for adding GSAP motion sequences?▼

Frontend standards for GSAP motion sequences require aligning animations with canonical motion references. This enforces consistent motion rules and validates timing behaviors against established component specifications.

Can I use design system rules for both web and mobile React projects?▼

Yes, you can use design system rules for React web and mobile projects. The standards enforce tokens, components, and motion uniformly across platforms to ensure responsive behaviors and accessibility conformance.

How do I validate accessibility conformance in UI components?▼

To validate accessibility conformance in UI components, check implementations against documented accessibility requirements. This ensures component specifications meet frontend standards and pass conformance reviews.

Why does my frontend UI need canonical references for component development?▼

Your frontend UI needs canonical references for component development to guide implementation and reviews. These references document component specifications, foundations, and patterns to accelerate development and ensure visual consistency.