skills.rest
hackefeller
hackefellerOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-system

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
One-click install
npx skills add https://github.com/hackefeller/hominem --skill design-system-hackefeller
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
olehsvyrydovolehsvyrydov
13

frontend-developer

Implement scalable React, Next.js, and React Native frontends with TypeScript and TailwindCSS.

Community
Intermediate
Prathmesh2000Prathmesh2000
1

storybook-writer

Generate CSF3 Storybook stories with interaction tests, a11y checks, and Chromatic setup.

Community
Advanced
zeitlinbzeitlinb

hyperframes-animation

Compose web animations using atomic motion patterns and runtime adapters.

Community
Advanced
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate