Core Components

davila7/claude-code-templates

This one enforces design token discipline across your component library. It stops you from hard-coding colors, spacing, and typography by providing a complete token system (spacing from $1 to $8, semantic color tokens like $textPrimary, font sizes). You get wrapper components like Box, HStack, VStack, Button, and Card that only accept token values as props. The anti-patterns section is the real value here: it shows exactly what not to do (raw View components, inline styles, magic numbers) versus the token-based approach. Use this when you're tired of inconsistent spacing and want your design system to actually get enforced at the code level instead of just documented in Figma.

skills.sh installs

249

GitHub stars

33.2K

last updated

Aug 21, 2026

// CORRECT - Use tokens
<Box padding="$4" marginBottom="$2" />

// WRONG - Hard-coded values
<Box padding={16} marginBottom={8} />

// CORRECT - Semantic tokens
<Text color="$textPrimary" />
<Box backgroundColor="$backgroundSecondary" />

// WRONG - Hard-coded colors
<Text color="#333333" />
<Box backgroundColor="rgb(245, 245, 245)" />

<Text fontSize="$lg" fontWeight="$semibold" />

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Recommended

More Frontend Development

1integrating-tauri-rust-frontendsdchuk/claude-code-tauri-skillsGuides the user through integrating Rust-based WASM frontend frameworks with Tauri v2, covering Leptos and Trunk setup, WASM compilation configuration, Cargo.to248skills.sh installs

2godot-platform-mobilethedivergentai/gd-agentic-skillsExpert blueprint for mobile platforms (Android/iOS) covering touch controls, virtual joysticks, responsive UI, safe areas (notches), battery optimization, and a248skills.sh installs

3nocobase-dsl-reconcilernocobase/skills**Opt-in DSL path** for NocoBase app building. Use ONLY when the user explicitly asks for YAML / DSL / committed-to-git / `cli push` / spec files — e.g. "use th244skills.sh installs

4magazine-web-pptnexu-io/open-design生成"电子杂志 × 电子墨水"风格的横向翻页网页 PPT（单 HTML 文件），含 WebGL 流体背景、衬线标题 + 非衬线正文、章节幕封、数据大字报、图片网格等模板。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"horizontal swipe deck"、"editori239skills.sh installs

5social-growth-engineergiulioco/skillsMaster viral app growth engineering using proven social media strategies. Provides comprehensive guidance on TikTok/Instagram Reels marketing, UGC networks, vir236skills.sh installs

6binary-triagecyberkaida/reverse-engineering-assistantPerforms initial binary triage by surveying memory layout, strings, imports/exports, and functions to quickly understand what a binary does and identify suspici234skills.sh installs