Design
UI/UX direction, visual design, and design systems
Prototype Designer
by daffy0208
Create interactive prototypes, design user flows, implement prototype testing strategies, and manage handoff to development. Validate ideas before building.
Design System Architect
by daffy0208
Build scalable, maintainable design systems that unify product experiences. Use when creating component libraries, design tokens, or establishing design standards. Covers atomic design, Storybook, theming, and design system governance.
brand-designer
by daffy0208
Expert in brand identity, logo design, and visual brand systems
visualizing-with-mermaid
by third774
Create professional Mermaid diagrams with proper styling and visual hierarchy. Use when creating flowcharts, sequence diagrams, state machines, class diagrams, or architecture visualizations.
brand-guidelines
by mujez
Brand identity and design system expert. Use when creating or enforcing brand consistency across UI, content, marketing materials, or code. Covers logo usage, typography, color systems, voice and tone, component design tokens, and brand governance. Activate when building new pages, writing copy, or reviewing designs for brand compliance.
auth_patterns
by vuralserhat86
Master authentication and authorization patterns including JWT, OAuth2, session management, and RBAC to build secure, scalable access control systems. Use when implementing auth systems, securing APIs, or debugging security issues.
backend_api
by vuralserhat86
REST uygulama, validation, security headers, auth patterns. ⚠️ Kod yazarken kullan. API tasarımı/GraphQL için → api-design.
backend_database
by vuralserhat86
Repository pattern, transactions, caching ve query optimization.
design_responsive
by vuralserhat86
Breakpoints, fluid typography, container queries ve modern CSS features.
canvas_design
by vuralserhat86
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
docs_api
by vuralserhat86
OpenAPI/Swagger API documentation ve endpoint belgeleme şablonları.
better_auth
by vuralserhat86
The ultimate authentication and authorization skill. Implement login, signin, signup, registration, OAuth, 2FA, MFA, passkeys, and user session management. Secure your application with RBAC and access control.
design_patterns
by vuralserhat86
Visual hierarchy, z-index, shadows, animations ve white space kuralları.
figma_integration
by vuralserhat86
Figma design-to-code, design system extraction ve component generation rehberi.
database_design
by vuralserhat86
Schema tasarımı, migration stratejileri, indexing, query optimization ve database best practices.
design_components
by vuralserhat86
Button, card, input ve icon sizing kuralları. Component boyutlandırma standartları.
api_design
by vuralserhat86
API tasarımı, GraphQL schema, OpenAPI spec, versioning. ⚠️ Tasarım aşaması için kullan. Uygulama/security için → backend-api.
design_tokens
by vuralserhat86
8-point grid spacing, typography scale ve color system. Temel tasarım değişkenleri.
backend_core
by vuralserhat86
Node.js/TypeScript temel prensipler, proje yapısı ve TypeScript strict mode kuralları.
clerk_auth
by vuralserhat86
Clerk modern authentication, WebAuthn, passkeys ve social auth entegrasyonu rehberi.
z-index-scale
by dylantarre
Generates systematic z-index tokens for layering management. Use when organizing stacking contexts, modal/dropdown z-index, tooltip layers, or fixing z-index conflicts. Outputs CSS, Tailwind, or JSON.
svelte
by dylantarre
Builds token-driven Svelte 5 components with runes ($state, $props) and TypeScript. Use when creating Svelte component libraries, integrating design tokens, or building SvelteKit design system components.
angular
by dylantarre
Builds token-driven Angular components with signals and standalone components. Use when creating Angular component libraries, integrating design tokens, or building design system components with new control flow syntax.
motion-scale
by dylantarre
Generates animation duration, easing curves, and delay tokens with prefers-reduced-motion support. Use when creating transition timing, animation speed, or motion systems. Outputs CSS, Tailwind, or JSON.