skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

planetscale-ui-skills

Enforce Planetscale UI design tokens, dark mode, Inter font, and 4px grid.

73|9|Updated Jan 25, 2026
Search Tags:#typography#design system#ui design#dark mode#spacing#planetscale
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill planetscale-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: planetscale-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/planetscale
Command: npx skills add https://github.com/ihlamury/design-skills --skill planetscale-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints and guidelines for building user interfaces that are visually consistent with the Planetscale platform, ensuring a cohesive and branded user experience.

Core Features & Use Cases

  • Aesthetic Consistency: Enforces Planetscale's dark mode, Inter font, and 4px grid system.
  • Design System Adherence: Provides specific color tokens, typography styles, spacing rules, and layout patterns.
  • Use Case: When developing a new feature for a platform that needs to match Planetscale's look and feel, use this Skill to guide the AI in applying the correct colors, fonts, and spacing.

Quick Start

Apply the Planetscale UI design system to the new dashboard component.

Frequently Asked Questions about planetscale-ui-skills

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

FAQPage Schema
How do I build a UI that matches the Planetscale design system?▼

Use this Skill to apply the Planetscale design system by enforcing dark mode, the Inter font, and a 4px grid. It provides specific color palettes, typography scales, and spacing rules for visually consistent interface development.

What typography and spacing rules does the Planetscale UI use?▼

The Planetscale UI uses the Inter font and a strict 4px grid for spacing rules. It enforces specific typography styles and semantic tokens to maintain cohesive layout patterns and interface consistency.

How do I apply semantic color tokens for dark mode in a design system?▼

Apply semantic color tokens for dark mode by adhering to defined color palettes and text styles. This Skill enforces those specific tokens to ensure your interface maintains a consistent branded experience in dark mode.

Can I use this to generate UI components for a custom dashboard?▼

Yes, you can use this to generate UI components for a custom dashboard. It provides layout patterns, component guidelines, and spacing rules to guide the AI in applying the correct visual styles for new platform features.

Do I need predefined design tokens to enforce UI consistency?▼

You do not need external design tokens because this Skill provides predefined semantic tokens, typography styles, and spacing rules. It enforces these opinionated constraints to ensure UI consistency without manual token definition.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

gusto-ui-skills

Enforce Gusto's UI design system constraints for light-mode interfaces.

Community
Intermediate
trycompaitrycompai
1.8k

ui

Enforce design-system tokens, theming, and accessible component patterns in React/TS frontend development.

Official
Intermediate
p-o-ke-naep-o-ke-nae

visual-design-foundations

Create cohesive visual design systems with typography, color, spacing, and iconography standards.

Community
Intermediate
ihlamuryihlamury
73

robinhood-ui-skills

Enforce Robinhood's UI design system constraints for dark mode interfaces with Inter font and a 4px grid.

Community
Intermediate