Plugins
4 pluginscurated
Design System Foundation
Create design tokens, principles, and naming conventions for a new design system.
16 skills · plugin
@owl-listener
Interaction Design
Interaction design skills: micro-interactions, animation principles, state machines, gesture patterns, error handling UX, and feedback patterns.
16 skills · plugin
curated
Build MVP from Idea
Build an MVP by validating the idea, planning the build, and executing with lean principles.
4 skills · plugin
curated
Idea to MVP
Processize an idea into a manual workflow, then build a minimal MVP using lean startup principles.
5 skills · plugin
Results for “principles”
20 skillsanimation-principles
Apply animation principles to UI motion for purposeful, polished interactions.
1.7k
react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
0
react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
2
tailwind-patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
3
clean-architecture
Structure software around the Dependency Rule so that source code dependencies point inward from frameworks to use cases to entities, keeping business rules independent of databases, UI, and external agencies.
1.6k · bundle
schema-org
Applies Schema.org structured data principles to guide decision-making, structure analysis, and improve search visibility outcomes.
2
More results
a11y
Generates code that conforms to WCAG 2.2 Level AA and follows inclusive language principles, with guidance on keyboard navigation, focus management, and low vision considerations.
54 · bundle
mobile-design
Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.
3 · bundle
mobile-design
Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.
0 · bundle
mobile-design
Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.
2 · bundle
high-perf-browser
Optimize web performance by applying browser networking, protocol, and rendering principles to reduce latency and improve Core Web Vitals.
1.6k · bundle
mengto-animation-systems
Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.
0 · bundle
maxim-ui-styling
Builds accessible, responsive UI components and layouts with shadcn/ui, Tailwind CSS, theming, dark mode, and WCAG 2.1 AA compliance, applying behavioral science principles.
2 · bundle
apple-design
Translates Apple's fluid interface design principles—springs, interruptible motion, velocity handoff, and momentum projection—into concrete web techniques for building and reviewing gesture-driven UI.
2
data-viz-2025
State-of-the-art data visualization for React/Next.js/TypeScript with Tailwind CSS. Creates compelling, tested, and accessible visualizations following Tufte principles and NYT Graphics standards. Activate on "data viz", "chart", "graph", "visualization", "dashboard", "plot", "Recharts", "Nivo", "D3". NOT for static images, print graphics, or basic HTML tables.
10 · bundle
apple-design
Translates Apple's fluid interface design principles—spring animations, direct manipulation, interruptibility, and velocity handoff—into web implementations using CSS, Pointer Events, and spring libraries like Motion/Framer Motion.
5k
design-build
Composite skill — design, scaffold, build, and verify a UI in one workflow. Chains ui-ux-pro-max or web-design-guidelines (audit/principles) → shadcn or tailwind-design-system (component scaffold) → impeccable or frontend-design (build) → webapp-testing (verify). Use when the task is "build this page", "design and implement X", or any new UI surface.
1 · bundle
motion-design-web
Motion design and micro-animations for web interfaces — Framer Motion layout animations, CSS scroll-driven animations, View Transitions API, GSAP ScrollTrigger, spring physics tuning, loading choreography, and Disney's 12 principles applied to UI. Makes interfaces feel alive without feeling busy. Activate on 'web animation', 'Framer Motion', 'micro-interaction', 'scroll animation', 'page transition', 'View Transitions API', 'spring animation web', 'motion design', 'loading animation', 'skeleton screen', 'hover effect', 'GSAP ScrollTrigger'.
10
api-design-principles
Designs REST and GraphQL APIs following production best practices for resource naming, error handling, versioning, authentication, and documentation. Use this skill when designing new API endpoints, reviewing API contracts, implementing GraphQL schemas, establishing API conventions for a project, or writing API documentation. Apply when creating any route in Next.js API routes or route handlers, any Supabase Edge Function, or any backend endpoint — even if it starts small, these patterns prevent painful rewrites later.
3
clean-architecture
Structure software around the Dependency Rule: source code dependencies point inward from frameworks to use cases to entities. Use when the user mentions "architecture layers", "dependency rule", "ports and adapters", "hexagonal architecture", "use case boundary", "onion architecture", "screaming architecture", or "framework independence". Also trigger when decoupling business logic from databases or frameworks, defining module boundaries, or debating where to put business rules. Covers component principles, boundaries, and SOLID. For code quality, see clean-code. For domain modeling, see domain-driven-design.
28 · bundle