UI Components
Code-based UI component generation and styling
tailwind-patterns
by srbhr
Production-ready Tailwind CSS patterns for common website components: responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, and dark mode support. Use when building UI components, creating landing pages, styling forms, implementing navigation, or fixing responsive layouts.
navigator
by srbhr
Codebase orientation. Use FIRST when exploring code, finding files, or understanding project structure.
code-review
by srbhr
Review code for correctness, security, performance, and Resume Matcher conventions. Use when receiving code review feedback or before submitting PRs. Requires technical rigor, not performative agreement.
nextjs15-performance
by srbhr
Next.js 15 critical performance fixes. Use when writing React components, data fetching, Server Actions, or optimizing bundle size.
nextjs-performance
by srbhr
Next.js critical performance fixes. Prevents async waterfalls, reduces bundle size, secures Server Actions, and ensures correct production builds. Use when writing React components, data fetching, Server Actions, or optimizing bundle size.
ui-review
by srbhr
Review UI changes against Swiss International Style design system. Checks colors, typography, borders, shadows, spacing, and anti-patterns. Use before committing any frontend UI changes.
ui-review
by srbhr
Review UI changes against Swiss International Style design system. Checks colors, typography, borders, shadows, spacing, and anti-patterns. Use before committing any frontend UI changes.
full-stack
by srbhr
Full-stack development skill that coordinates backend and frontend changes together. Use for features that span both layers: new API endpoint + UI, data model changes, end-to-end flows.
frontend-dev
by srbhr
Frontend development skill for Resume Matcher. Handles Next.js pages, React components, Tailwind CSS with Swiss International Style, API integration, hooks, and i18n. Use when creating or modifying frontend code.
tailwind-patterns
by srbhr
Production-ready Tailwind CSS patterns for common website components: responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, and dark mode support. Use when building UI components, creating landing pages, styling forms, implementing navigation, or fixing responsive layouts.
soul
by aaronjmars
Embody this digital identity. Read SOUL.md first, then STYLE.md, then examples/. Become the person—opinions, voice, worldview.
ui-design-styling
by ryokun6
Design and style UI components for ryOS following the 4 OS themes (System 7, macOS Aqua, Windows XP, Windows 98). Use when creating UI components, styling elements, working with themes, adding visual effects, or implementing retro OS aesthetics.
create-ryos-app
by ryokun6
Create new applications for ryOS following established patterns and conventions. Use when building a new app, adding an application to the desktop, creating app components, or scaffolding app structures.
localize
by ryokun6
Localize ryOS apps and components by extracting hardcoded strings, replacing with translation keys, and syncing across languages. Use when localizing an app, adding i18n support, translating UI text, or working with translation files.
tsdown
by dinerojs
Bundle TypeScript and JavaScript libraries with blazing-fast speed powered by Rolldown. Use when building libraries, generating type declarations, bundling for multiple formats, or migrating from tsup.
add-new-setting-field
by tsukumijima
"【設定追加時は必ず参照】KonomiTV に新しい設定 (v-switch/v-select など) を追加する際の必須手順。SettingsStore.ts / Settings.ts / config.py / Settings/*.vue への追加が必要"
kimi-xlsx
by thvroyal
"Specialized utility for advanced manipulation, analysis, and creation of spreadsheet files, including (but not limited to) XLSX, XLSM, CSV formats. Core functionalities include formula deployment, complex formatting (including automatic currency formatting for financial tasks), data visualization, and mandatory post-processing recalculation. "
brand-consistency-checker
by OneWave-AI
Scan documents and slides for off-brand colors, fonts, and logos. Validate against brand guidelines and suggest corrections.
conversation-archaeologist
by OneWave-AI
Mine ALL past Claude conversations to build a living 'User Manual About You'. Extract writing style, business context, goals, preferences, and patterns. Make all other skills smarter with context.
color-palette-extractor
by OneWave-AI
Extract color palettes from images, websites, or designs. Identifies dominant colors, generates complementary schemes, and exports in multiple formats (HEX, RGB, HSL, Tailwind, CSS variables). Use when users need color schemes from images, brand colors, or design system palettes.
font-pairing-suggester
by OneWave-AI
Recommend font combinations for different use cases. Provide Google Fonts alternatives to premium fonts with hierarchy examples.
Experiment
by simota
A/Bãã¹ãè¨è¨ã仮説ããã¥ã¡ã³ãä½æããµã³ãã«ãµã¤ãºè¨ç®ããã£ã¼ãã£ã¼ãã©ã°å®è£ ãçµ±è¨çæææ§å¤å®ãå®é¨ã¬ãã¼ãçæã仮説æ¤è¨¼ãå¿ è¦ãªæã«ä½¿ç¨ã
cw-router
by haowjy
Quick guide to choosing the right creative writing skill. Use when you need help deciding which creative writing skill to use for a specific task - brainstorming vs documentation, critique vs writing, etc.
cw-prose-writing
by haowjy
Creative writing skill for drafting and editing narrative fiction prose. Use when writing new scenes, chapters, or dialogue, or when editing existing prose. Discovers and follows project-specific style guides, character voice conventions, and formatting preferences.