svelte-ui-integration
Implement or extend user-facing workflows in SvelteKit applications with full-stack capabilities. Specialized in SvelteKit's load functions, form actions, and progressive enhancement. Use when the feature is primarily a UI/UX change backed by existing APIs, affects only the web frontend, and requires following SvelteKit conventions.
What this skill does
# SvelteKit UI Integration ## Purpose Implement or extend user-facing workflows in SvelteKit applications, leveraging **SvelteKit's full-stack capabilities** including load functions, form actions, and API routes. Follow **SvelteKit conventions** for routing, state management, and progressive enhancement. ## When to use this skill - The feature is primarily a **UI/UX change** leveraging SvelteKit's architecture. - Building progressive enhancement with server-side rendering and client-side interactivity. - The backend contracts, auth model, and core business rules **already exist** or will be implemented as SvelteKit API routes. - The change affects **only** the SvelteKit application (no external service changes). ## Inputs - **Feature description**: short narrative of the user flow and outcomes. - **Relevant APIs**: endpoints, request/response types, and links to source definitions. - **Target routes/components**: paths, component names, or feature modules. - **Design references**: Figma links or existing screens to mirror. - **Guardrails**: performance limits, accessibility requirements, and any security constraints. ## Out of scope - Creating new backend services or changing persistent data models. - Modifying authentication/authorization flows. - Introducing new frontend frameworks or design systems. ## Conventions - **Framework**: SvelteKit with TypeScript. - **Routing**: use SvelteKit's file-based routing with `+layout.svelte`, `+page.svelte`, and `+page.server.ts`. - **Styling**: Use shadcn-svelte, Skeleton UI, or Melt UI components (via `shadcn-svelte-management` skill) or the in-house design system components. When using UI components, invoke the `shadcn-svelte-management` skill to: - Discover available Svelte components - Get component installation commands - Choose appropriate component library (shadcn-svelte, Skeleton UI, Melt UI) - **State management**: prefer Svelte stores, reactive statements, and SvelteKit's form actions. - **Data fetching**: use SvelteKit load functions for server-side data and progressive enhancement. ## Required behavior 1. Implement the UI changes with **strong typing** for all props, load function data, and form actions. 2. Handle loading, empty, error, and success states using SvelteKit's `$page.form` and reactive statements. 3. Ensure the UI is **keyboard accessible** and screen-reader friendly with proper ARIA attributes. 4. Leverage SvelteKit's progressive enhancement - works without JavaScript, enhanced with it. 5. Respect feature flags and rollout mechanisms where applicable. ## Required artifacts - Updated components and actions in the appropriate feature module (`src/lib/components/`). - **Load functions** in `+page.server.ts` or `+layout.server.ts` for server-side data. - **Form actions** for handling form submissions with progressive enhancement. - **Unit tests** for core presentation logic and Svelte stores. - **Integration or component tests** for the new flow (e.g., Svelte Testing Library, Cypress, Playwright) where the repo already uses them. - Minimal **CHANGELOG or PR description text** summarizing the behavior change (to be placed in the PR, not this file). ## Implementation checklist 1. Locate the relevant feature module and existing components in `src/lib/components/`. 2. Confirm the backend APIs and types, updating shared TypeScript types if needed. 3. Implement the UI with SvelteKit patterns: - Use `+page.server.ts` for server-side data loading - Use form actions for POST/PUT/DELETE operations - Leverage `+layout.svelte` for shared UI elements - Implement progressive enhancement 4. Add or update tests to cover the new behavior and edge cases. 5. Run the required validation commands (see below). ## Verification Run the following (adjust commands to match the project): - `pnpm lint` - `pnpm test -- --runInBand --watch=false` - `pnpm check` (SvelteKit type checking) - `pnpm build` (to verify production build) - `pnpm preview` (test production build locally) The skill is complete when: - All tests, linters, and type checks pass. - The new UI behaves as specified across normal, error, and boundary cases. - Progressive enhancement works (functional without JavaScript). - Form submissions work with and without JavaScript. - No unrelated files or modules are modified. ## Safety and escalation - If the requested change requires external backend contract changes, **stop** and request a backend-focused task instead. - If design references conflict with existing accessibility standards, favor accessibility and highlight the discrepancy in the PR description. - Always implement with progressive enhancement in mind - ensure functionality works without JavaScript.
Related in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.