supabase-ui-skills
CommunityBuild Supabase-style interfaces.
Design & Creative#typography#design system#supabase#frontend development#ui design#dark mode#spacing
Authorihlamury
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides opinionated constraints and guidelines for building user interfaces that are visually consistent with Supabase's design system, ensuring a familiar and high-quality user experience.
Core Features & Use Cases
- Dark Mode Implementation: Enforces dark backgrounds and specific color palettes suitable for dark themes.
- Typography and Spacing: Guides the use of the 'Inter' font family, consistent font sizes, and a strict 4px grid for spacing and layout.
- Component Styling: Defines specific styles for buttons and interactive states (focus, hover, disabled) to match Supabase's UI.
- Use Case: When developing a new feature for a project that needs to align with Supabase's existing look and feel, use this Skill to ensure all new UI elements, from buttons to text, adhere to the established design language.
Quick Start
Apply the Supabase UI skills to ensure the new interface uses dark mode, the Inter font, and a 4px grid.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: supabase-ui-skills Download link: https://github.com/ihlamury/design-skills/archive/main.zip#supabase-ui-skills Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.