Software Development Skills

Phase 4: Add Framer Motion scroll reveals (IntersectionObserver), hover scale/opacity transitions, focus ring states, loading skeletons, glassmorphism blur layers, gradient orb backgrounds — all via modifyfrontend.

Systematic development workflow: Analyze → Plan → Execute → eLicit → eXamine. Use for ANY development task: features, bug fixes, refactoring, hotfixes.

Expert Astro 6 framework — routing, output modes, middleware, Vite Environment API, Rust compiler, Content Security Policy, Live Collections, Fonts API. Use when building Astro sites, configuring output, or upgrading from Astro 5.

Expert Astro 7 framework (stable, 7.0.9) — routing, output modes, middleware, Vite Environment API, single Rust compiler, Content Security Policy, Live Collections, Fonts API. Use when building Astro sites, configuring output, or upgrading from Astro 5/6.

Expert Astro Server Actions — defineAction, astro:actions, Zod validation, ActionError, HTML form actions, accept form, progressive enhancement, redirect patterns. Use when handling form submissions, mutations, or any server-side logic with type safety.

Image and asset optimization in Astro 6 — , , getImage(), remote images, @astrojs/sharp, Fonts API, OG image generation with Satori, Cloudinary/Imgix. Use for any image optimization or asset handling task.

Astro DB — defineDb, defineTable, column types, CRUD with db.select/insert/update/delete, db/config.ts, db/seed.ts, Turso for production, type-safety, integration with Astro Actions. Use for any database operation in an Astro project.

Deploying Astro 6 apps — @astrojs/cloudflare (Workers, D1, KV, R2), @astrojs/vercel (Serverless/Edge, Image CDN), @astrojs/netlify (Edge Functions), @astrojs/node (standalone), ISR patterns, edge middleware, skew protection. Use for any deployment configuration.

Expert Astro Islands Architecture — client:load, client:idle, client:visible, client:media, client:only, server:defer (Server Islands), fallback slots, transition:persist, prop serialization. Use when adding interactivity to Astro pages or rendering dynamic server content.

Astro Starlight documentation theme — setup, sidebar config, Pagefind search, dark/light mode, plugins (DocSearch, blog, openapi, typedoc, versions), multi-language, Content Layer API, llms.txt, customization. Use for building documentation sites.

Use when styling Astro components with scoped CSS, CSS Modules, Tailwind CSS, UnoCSS, or Sass. Covers class:list directive, global styles, CSS custom properties, and Vite-powered preprocessors.

Audit authentication and authorization patterns. Checks JWT, sessions, OAuth2, PKCE implementations for security best practices and common vulnerabilities.

App build, code signing, TestFlight, and App Store distribution for all Apple platforms. Use when preparing releases, configuring signing, uploading to TestFlight, or submitting to App Store.

Scan Claude Code changelog for new versions, features, and changes. Fetches official docs, parses release notes, and generates structured update report.

Detects optimal commit type from git changes. Use when analyzing commits, determining commit type, or before committing.

Optimization guide for fuse-commit-pro commit workflow. Documents settings to reduce token usage.

Monitor community feedback on Claude Code via Exa search. Gathers sentiment, real-world usage patterns, bug reports, and feature requests from blogs, forums, and social media.

Research CVEs and security advisories for project dependencies. Uses Exa, NVD API, OSV.dev, and GitHub Advisory Database to find known vulnerabilities.

Android mockups and handoff specs — Material 3 Expressive type scale (baseline + emphasized), full color-role system (45 roles incl. surface-container ramp + dynamic color), elevation tokens, shape scale, window size classes, FAB tiers, motion, device-framed HTML mockup, and a Compose-ready handoff spec. Produces tokens + mockup only, never Compose code.

Phase 5: Verify contrast >= 4.5:1 text / 3:1 UI in both light+dark, check no Inter/Roboto/Arial/Open Sans, confirm all colors are OKLCH from design-system.md, validate hover/focus/disabled/loading states, run anti-AI-slop checklist.

Core design method — Register resolution (brand vs product), the Design Read one-liner + the 3 dials (DESIGNVARIANCE/VISUALDENSITY/MOTIONINTENSITY), the Gate 0 brief lock, Absolute bans, the 2-level AI-slop test, and routing to a move (generate/critique/audit/bolder/quieter/distill/harden/polish) and its target skill. Read this first, before design-system, any register/.md, or any moves/.md file.

Marketing sites, landing pages, campaign pages — register brand (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.

Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register product: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.

Phase 1: Browse 4 catalog sites via Playwright, write CSS-precise observations (oklch values, font-size clamp, grid ratios, border-radius, shadows), declare reference site + 3 elements. Feed specs to Gemini context.