skills.rest
jbreel77888
jbreel77888COMMUNITY
Explore all skills by this author →
GitHub

creative

Generates implementation-ready design-system guidelines using Creative's playful tokens and typography.

Updated Jun 20, 2026
Search Tags:#typography#accessibility#WCAG#landing page#design system#design tokens#component guidelines
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill creative-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: creative
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/creative
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill creative-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building landing pages and creative projects often lack consistent, documented design rules, leading to inconsistent spacing, low-contrast text, and ad-hoc component styling. This Skill turns the Creative design system's tokens and foundations into opinionated, implementation-ready guidance for engineers and designers. ## Core Features & Use Cases - Design Token Foundations: Provides the full Creative palette (primary #3B82F6, secondary #8B5CF6, semantic colors), typography scale (12/14/16/20/24/32 with Bangers and IBM Plex Mono), and spacing scale (4/8/12/16/24/32). - Component-Level Rules: Generates guidance covering anatomy, variants, states (hover, focus-visible, disabled, loading, error), responsive behavior, and edge cases. - Accessibility & QA: Enforces WCAG 2.2 AA requirements with testable acceptance criteria, anti-patterns, and a code-review-ready QA checklist. - Use Case: A designer asks for button guidelines for a playful landing page; the Skill outputs token-anchored rules for every state, keyboard and touch behavior, and migration notes for inconsistent existing UI. ## Quick Start Ask the AI to generate Creative design-system guidelines for a landing page hero section, including component states, accessibility criteria, and a QA checklist.

Frequently Asked Questions about creative

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

FAQPage Schema
How do I create design system guidelines for a landing page?▼

Define tokens and foundations first, then specify component anatomy, states, variants, and interaction behavior. This Skill follows a six-step authoring workflow ending with accessibility acceptance criteria and a QA checklist executable in code review.

What color and typography tokens does the Creative style use?▼

Creative uses primary #3B82F6, secondary #8B5CF6, success #16A34A, warning #D97706, danger #DC2626, with Bangers for headings and body, IBM Plex Mono for labels, a 12/14/16/20/24/32 type scale, and a 4/8/12/16/24/32 spacing scale.

Does the Creative design system meet WCAG accessibility standards?▼

Yes, the Skill targets WCAG 2.2 AA with keyboard-first interactions and visible focus states. Every accessibility statement it generates must be testable in implementation, and conflicts between aesthetics and accessibility are resolved in favor of accessibility.

What component states should design guidelines define?▼

Guidelines should define default, hover, focus-visible, active, disabled, loading, and error states as relevant. They must also describe keyboard, pointer, and touch interaction behavior plus responsive edge cases like long labels and overflow.

When should I not use a playful design style like Creative?▼

Playful styles with expressive display fonts like Bangers fit landing pages and creative projects but may undermine trust in formal contexts such as finance, legal, or enterprise dashboards, where a neutral, conservative design system is more appropriate.

Related Skills

Explore More Design & Creative Skills→
Pika-LabsPika-Labs
38

build-a-brand

Build a complete brand identity and 15-page brand guidelines PDF.

Official
Advanced
WP-CoachingWP-Coaching

tailwind-design-system

Builds Tailwind CSS design systems with tokens, CVA variants, and accessible components.

Official
Intermediate
bdbchbdbch
2

design-compliance

Audit web design compliance against contrast, spacing, typography, and hit target standards.

Community
Advanced
MyHeavenDyfMyHeavenDyf

html-ppt-zhangzara-scatterbrain

Generate HTML presentations with integrated typography, color schemes, and decorative elements.

Community
Intermediate