cin12211/orca-q
Overview
This skill provides UI/UX design intelligence and hands-on implementation guidance for web and mobile products. It combines 50 UI styles, 21 color palettes, 50 font pairings, 20 chart types, and stack-specific recommendations across nine common stacks. Use it to plan, build, review, or fix interfaces for websites, dashboards, apps, and component-level UI elements.
How this skill works
I analyze your product type, style keywords, industry, and target stack to generate a tailored design system and implementation plan. The skill recommends colors, typography, spacing, accessibility checks, interaction patterns, and chart choices, then produces stack-specific code snippets or review feedback. It also runs iterative searches against curated domains (product, style, typography, color, landing, chart, ux, stack) to refine recommendations until the design goals are met.
When to use it
- Starting a new website, landing page, dashboard, admin panel, or mobile app
- Needing a style system: palette, font pairings, spacing, and interaction rules
- Preparing UI code for a specific stack (React, Vue, Next.js, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn)
- Performing a UI/UX review, accessibility audit, or pre-delivery checklist
- Refactoring or optimizing components: buttons, modals, navbars, cards, tables, forms, charts
Best practices
- Default to html-tailwind when stack is unspecified; provide stack flag for implementation-specific advice
- Use SVG icon sets (Heroicons, Lucide) and fixed viewBox sizing for consistency
- Ensure clear hover and focus states, cursor-pointer on interactive elements, and transitions of 150–300ms
- Maintain light/dark contrast ratios, test prefers-reduced-motion, and provide alt text and form labels
- Keep consistent container max-widths and responsive checks at 320, 768, 1024, and 1440px
Example use cases
- Design a SaaS analytics dashboard with recommended chart types, palettes, and Vue implementation tips
- Create a conversion-focused landing page: hero, social proof, CTAs, and responsive Tailwind markup
- Refactor a mobile app UI to use platform-appropriate patterns for React Native or SwiftUI
- Review an e-commerce product page for accessibility, spacing, and iconography consistency
- Generate font pairings and CSS variables for a brand refresh with dark mode support
FAQ
Nine stacks are supported: html-tailwind (default), React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and shadcn/ui.
How do you handle accessibility?
Accessibility guidance is built-in: color contrast checks, focus states, labels, alt text, and reduced-motion recommendations are included in every deliverable.
15 skills
This skill helps designers plan, build, and optimize UI/UX for websites and apps using diverse styles, palettes, fonts, and stacks.
This skill provides deep, actionable code review across architecture, quality, security, performance, testing, and API design to guide significant changes.
This skill provides expert Playwright guidance for setting up E2E tests, cross-browser runs, and reliable automation workflows.
This skill helps you build robust npm CLI tools by applying Unix-inspired patterns, automatic project root detection, cross-platform arg parsing, and
This skill helps you conduct focused research with structured outputs, delivering concise findings, sources, and an organized report ready for review.
This skill helps you design robust REST APIs with proper endpoints, HTTP semantics, versioning, error handling, pagination, and OpenAPI documentation.
This skill helps you improve test reliability and debug complex suites across Jest, Vitest, Playwright, and Testing Library for Vue projects.
This skill helps optimize database performance and design across PostgreSQL, MySQL, MongoDB, and SQLite with ORM integration.
This skill acts as a Nest.js expert, guiding architecture, DI, testing, and authentication decisions to optimize enterprise applications.
This skill helps you diagnose and optimize Next.js App Router issues, hydration, and performance to deliver faster, reliable deployments.
This skill helps you resolve complex git conflicts, manage branches, and optimize repository health with proactive, best-practice guidance.
This skill optimizes Vite builds and dev experience by applying modern ESM-first patterns, HMR tuning, and selective plugin strategies.
This skill helps you master advanced TypeScript types, generics, and template literals to solve complex type-level challenges efficiently.
This skill helps you craft scalable CSS architectures and responsive designs while optimizing performance, accessibility, and design system consistency across
This skill helps you optimize Node.js performance and debugging by applying practical async, module, and server patterns across applications.
