skills.rest
Hey-Viswa
Hey-ViswaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

kraken-design-skill

Translate product requirements into Kraken design-system aligned UI decisions for dashboards and forms.

Updated Apr 11, 2026
Search Tags:#typography#components#design-system#spacing#ui-patterns#kraken
One-click install
npx skills add https://github.com/Hey-Viswa/-claude-design-system-skills --skill kraken-design-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kraken-design-skill
Source: https://github.com/Hey-Viswa/-claude-design-system-skills/tree/main/design_system_skills/kraken-design-skill
Command: npx skills add https://github.com/Hey-Viswa/-claude-design-system-skills --skill kraken-design-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams need a consistent Kraken design-system base to speed UI decisions and maintain coherent visual language across products and teams.

Core Features & Use Cases

  • Propose layout, typography, color, and interaction patterns aligned with Kraken rules.
  • Map user intents to Kraken-compliant components and usage guidelines.
  • Provide implementation-ready guidance for React/Next.js teams.

Quick Start

Describe your target interface and user goals, and ask for Kraken-style UI patterns and components.

Frequently Asked Questions about kraken-design-skill

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

FAQPage Schema
How do I apply design-system patterns to a new dashboard interface?▼

To apply design-system patterns, translate product requirements into Kraken-aligned UI decisions for layout, typography, and color, ensuring visual coherence across dashboard components.

What is the best way to map user intents to compliant UI components?▼

Mapping user intents to compliant UI components involves referencing Kraken design-system rules, matching interaction conventions, and selecting appropriate tokens to guide interface structure.

Can I use Kraken design-system rules for React and Next.js projects?▼

Yes, Kraken design-system rules provide implementation-ready guidance for React and Next.js teams, ensuring that generated UI patterns and components map directly to your framework conventions.

How do I maintain consistent typography and spacing across multiple products?▼

Maintain consistent typography and spacing by referencing standardized Kraken design-system tokens and layout guidance, enforcing a uniform visual language across all product interfaces.

Does this approach work for generating form layouts and interaction patterns?▼

Yes, this approach works for generating form layouts by proposing Kraken-compliant interaction patterns, spacing rules, and component usage guidelines tailored to your specific user goals.

Related Skills

Explore More Design & Creative Skills→
kevinlinkevinlin
14

feature-spec

Generate a structured PRD with problem statements, goals, user stories, and acceptance criteria.

Community
Advanced
AnasAhmed001AnasAhmed001
1

shadcn-ui-designer

Design shadcn/ui components for Next.js and React projects.

Community
Intermediate
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-figma

Extract design tokens and translate Figma designs into CSS-ready components.

Community
Advanced
wesleyarawesleyara

new-component

Generate Vue components for the TrackGrowth app with project conventions.

Community
Intermediate