Design skills

Implements responsive and adaptive layouts in Flutter using flutter_screenutil v5.9.x (pixel-perfect scaling from Figma), sizer v3.1.x (percentage-based viewport), and responsive_framework v1.1.x (breakpoint-driven structure changes). Use this skill when building apps for multiple screen sizes (phones, tablets, foldables, desktop, web), fixing layout overflow or sizing issues, implementing breakpoint-based adaptive UI, creating pixel-perfect designs from Figma specs, handling orientation changes, supporting Flutter web or desktop responsive layouts, or any time the words 'responsive', 'screenutil', 'sizer', 'breakpoint', 'adaptive layout', or 'screen size' appear in the request. Includes a decision matrix for selecting the correct package per scenario.

The English summary is being prepared. Showing the original description.

Manages local UI state and side effects in Flutter using the flutter_hooks package (v0.21.x) with HookWidget, useState, useEffect, useMemoized, useAnimationController, and custom hooks. Use this skill when replacing StatefulWidget boilerplate with hooks, reusing stateful UI logic across widgets, managing controller lifecycles (TextEditingController, AnimationController, ScrollController) without manual dispose, implementing countdown timers or subscriptions in widgets, mixing flutter_hooks with Riverpod via HookConsumerWidget, or any time the words 'flutter hooks', 'useEffect', 'useState', 'HookWidget', or 'flutter_hooks' appear in the request.

The English summary is being prepared. Showing the original description.

Declarative animation patterns using flutter_animate v4.5.x with composable effects (fade, scale, slide, shimmer, shake, blur), GLSL fragment shaders, and scroll-synchronized animations. Use this skill for adding UI animations and transitions, building staggered or sequenced effects, creating custom animation effects, fixing animation jank or performance issues, implementing shimmer loading states, or adding scroll-driven animations. Supports delays, curves, adaptive effects, and easy extension method chaining (.animate()).

The English summary is being prepared. Showing the original description.

TidyFactor Design track — code-native UI design lifecycle engine (Figma alternative). Supports all 7 stages of UI design (Discovery, Foundation, Architecture, Components, Motion, Quality, Delivery) with zero per-page CSS/JS and zero build step. Pluggable CSS foundations (Native, Tailwind utility-first, daisyUI, Hybrid, shadcn, Pico, Bootstrap, Alpine) and full Arabic/RTL support (El Messiri/Tajawal, never Amiri above 24px). Trigger on commands "study", "brief", "init", "brand", "typography", "school", "tokens", "palette", "assets", "layout", "nav-footer", "components", "page", "dashboard", "motion", "states", "flow", "i18n", "perf", "audit", "clone", "retrofit", "handoff", "deploy", or requests like "build a design system", "UI design lifecycle", "prototype this website", "Figma alternative", "نموذج أولي تفاعلي", "صمّم لوحة تحكم".

The English summary is being prepared. Showing the original description.

Code-native UI design lifecycle engine (Figma alternative) with Contextual Decision Layer (CDL). Supports all 7 design stages with zero per-page CSS/JS and pluggable CSS foundations (Native, Tailwind, daisyUI, Pico, Hybrid). Trigger on commands 'brief', 'study', 'init', 'brand', 'tokens', 'palette', 'layout', 'components', 'page', 'dashboard', 'motion', 'i18n', 'audit', 'deploy', or design system requests.

The English summary is being prepared. Showing the original description.

Enforces error handling standards: silent error prohibition, custom error class hierarchy (AppError base with category never-fallback / transient / permanent, cause preservation, ValidationError / UnauthorizedError / UpstreamError etc. — canonical definitions in ERRORS.md), external-boundary normalization (normalizeExternalError), Result pattern (Result.ok/Result.fail), proper try-catch with error type checking, structured error logging with a single Logger contract, fallback prohibition categories (isNeverFallback), and HTTP status code mapping. Use when implementing error handling, reviewing catch blocks, or designing error responses.

The English summary is being prepared. Showing the original description.

型設計の品質と不変性を4軸スコアで分析する。interface, type, class の追加・変更時に使用。

The English summary is being prepared. Showing the original description.

UI review and browser-driven debugging workflow for Chrome DevTools MCP, Playwright MCP/CLI, browser ownership, evidence capture, minimal fixes, and durable UI regression tests.

The English summary is being prepared. Showing the original description.

Guide polished web-interface design using Vercel-style product sensibilities. Use for web UI quality, layout, hierarchy, and interaction polish.

The English summary is being prepared. Showing the original description.

Guide Prisma ORM work. Use for schema design, Prisma Client, migrations, Postgres setup, upgrades, driver adapters, and query review.

The English summary is being prepared. Showing the original description.

Guide system design work. Use for requirements, APIs, data models, service boundaries, scalability, reliability, security, and tradeoff analysis.

The English summary is being prepared. Showing the original description.

Project-aware shadcn/ui guide. Use for shadcn setup, components, CLI/MCP, registry, theming, forms, Radix/Base UI, aliases, updates, and troubleshooting in React UI projects.

The English summary is being prepared. Showing the original description.

Guide Tailwind CSS best practices. Use for utility-class architecture, responsive design, theming, component styling, and CSS cleanup.

The English summary is being prepared. Showing the original description.

Guides distinctive, intentional frontend visual design. Use when shaping UI aesthetics, typography, layout, color, interaction polish, or design critique.

The English summary is being prepared. Showing the original description.

Use when building UI, components, motion icons, loaders, or visual design. In BDB projects, routes to the BDB component and motion-icon library (npm @hybridlabor-api/ui-motion-library, shadcn namespace @bdb) as the first source before third-party registries or building from scratch. Outside BDB projects, the same lookup order applies with the original sources listed in the bdb-ui-library repository docs.

The English summary is being prepared. Showing the original description.

Design, refine, implement, or review application UI and user journeys with minimal controls, clear actions, shared components, realistic prototypes, and polished behavior. Use for product screens, forms, onboarding, navigation, settings, and chat/task interfaces; not backend-only work or general graphic design.

The English summary is being prepared. Showing the original description.

کیفیت UI assistant for Codex; apply when building Persian/RTL web products, localizing content or integrating the related Iranian workflow. Local independent adaptation inspired by publicly documented VibeFarsi topics.

The English summary is being prepared. Showing the original description.

میکروکپی assistant for Codex; apply when building Persian/RTL web products, localizing content or integrating the related Iranian workflow. Local independent adaptation inspired by publicly documented VibeFarsi topics.

The English summary is being prepared. Showing the original description.

VibeFarsi design themes: production-level token mapping and palette integration. Use when implementing, reviewing or testing vibefarsi design themes for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Microinteraction system: production-level hover, focus, error, success, loading. Use when implementing, reviewing or testing microinteraction system for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Responsive Persian typography: production-level fluid type, glyph coverage, line height. Use when implementing, reviewing or testing responsive persian typography for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Visual hierarchy and layout: production-level grid, rhythm, whitespace, depth. Use when implementing, reviewing or testing visual hierarchy and layout for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Component design system: production-level tokens, variants, slots, state diagrams. Use when implementing, reviewing or testing component design system for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

راست‌چین assistant for Codex; apply when building Persian/RTL web products, localizing content or integrating the related Iranian workflow. Local independent adaptation inspired by publicly documented VibeFarsi topics.

The English summary is being prepared. Showing the original description.