Design frontend interfaces with design tokens, typography, motion, and accessibility checks.
npx skills add https://github.com/kaynetik/skills --skill frontend-design-kaynetik
Please help me install this Agent Skill. Skill: frontend-design Source: https://github.com/kaynetik/skills/tree/main/frontend-design Command: npx skills add https://github.com/kaynetik/skills --skill frontend-design-kaynetik
Helps teams and developers create cohesive, production-ready frontend interfaces by providing concrete design system architecture, token conventions, typography guidance, motion patterns, and accessibility checks that bridge design and implementation.
Create a tokenized design system for a responsive homepage with a distinct display font, body font, primary/accent colors, spacing scale, and an accessibility checklist.
High-intent search queries and answers about installing and using this skill.
To create a design system in Next.js, define token naming conventions, spacing scales, radius and shadow tokens, and CSS custom property patterns. This provides a consistent foundation for implementing production-grade frontend interfaces across your web application.
Setting up responsive typography involves using curated display and body font pairings alongside a defined type scale. For Next.js implementations, you can apply guidance for self-hosted fonts to ensure optimal performance and visual consistency.
Adding accessible motion patterns requires orchestrating animations with built-in reduced-motion support. This ensures your frontend interfaces provide deliberate visual depth while complying with accessibility standards for users who prefer reduced motion.
Yes, you can generate an accessibility checklist that evaluates contrast, focus, and semantics. This ensures your tokenized Next.js component library meets necessary accessibility standards during product development.
No, you do not need existing design tokens. You can generate a complete tokenized design system from scratch, including primary and accent colors, spacing scales, and typography, ready for immediate implementation in a Next.js homepage or dashboard.
Fr-e-dAnalyze project directory structures to generate architectural summaries.
nazlicancaglarTranslate brand visual identity into tokenized CSS custom properties and design tokens.
The-Skyy-Rose-Collection-LLCBuild interactive web experiences with JavaScript frameworks and animation libraries.
salamientarkGenerate design tokens and developer handoff documentation from Python scripts.
