millionco
- 29 skills
- 0 followers
- 14 hours ago last updated
- ▌ Writing Skills · millioncoUse when creating new skills, editing existing skills, or verifying skills work before deployment
- ▌ Fixing Metadata · millioncoAudit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up canonical URLs, or shipping new pages that need correct meta tags.
- ▌ Fixing Motion Performance · millioncoFix animation performance issues. Use when adding or changing UI animations, refactoring janky interactions, implementing scroll-linked motion, animating layout/filters/masks, or reviewing components that use will-change, transforms, or measurement.
- ▌ Debug Agent 2 · millioncoSystematic evidence-based debugging using runtime logs. Generates hypotheses, instruments code with NDJSON logs, guides reproduction, analyzes log evidence, and iterates until root cause is proven with cited log lines. Use when the user reports a bug, unexpected behavior, or asks to debug an issue.
- ▌ Web Performance · millioncoUse when the user reports jank, dropped frames, janky scrolling, slow click or typing response, poor INP, slow LCP, layout shifts (CLS), unresponsive pages, or asks to debug rendering, animation, or interaction performance in a browser app.
- ▌ Rule Writing · millioncoImplement deslop-js detectors from a validated finding contract. Use when adding or changing dead-code, dependency, import/export graph, redundancy, DRY, or TypeScript semantic findings, fixtures, public types, or report wiring.
- ▌ Rule Research · millioncoResearch and scope deslop-js detector ideas before implementation. Use when validating a proposed finding, grounding it in JavaScript/TypeScript/module-system behavior, fixture evidence, false-positive traps, detector precision, or v1 non-goals.
- ▌ Rule Validate · millioncoValidate implemented deslop-js detectors before PR or merge. Use after focused tests pass to review correctness, inspect false positives, update docs/changesets, write PR descriptions, and triage review comments.
- ▌ Paper Flex · millionco bundleUse when converting Paper canvas or design nodes from absolute positioning to flex or auto-layout. Covers Paper MCP absolute-to-flex restructuring, x-paper-clone preservation, clone z-order, computed spacing, shadow cleanup, SVG/image fidelity, layered cards, and screenshot verification.
- ▌ Reconcile Paper Sync · millioncoUse when a built app that was derived from a Paper design looks "slightly off" versus the design, or to verify a Paper-to-code implementation against its source. Covers using a local paper-sync project as the canonical oracle, porting the real fonts, extracting exact type/color/spacing values from canonical frames, and screenshot-diffing the running app against the paper-sync `?preview#<frame>` render.
- ▌ Interactive Hit Areas · millioncoUse when interactive elements that have visual spacing between them (chart bars/columns, list rows, nav items, segmented controls, tabs, calendar cells, icon buttons, legend chips) need hover or click to respond across the whole region with no dead zones. Triggers on "dead space", "deadspace", "gap between bars/items isn't clickable", "hover flickers between items", "have to aim precisely", "hit area too small", "highlight drops out between". Covers separating the hit area from the visual area, why gap/margin/space-between creates dead zones, and the flush-target + inner-spacing fix.
- ▌ Paper To Code Components · millioncoUse when implementing Paper MCP, Paper-to-code, design-to-code, Viewfinder, or Paper-exported JSX in React/Next.js apps. Covers component candidates, choosing the canonical artboard among iterations, data-driven charts/visualizations, globals.css tokens for arbitrary values, shadcn reuse, data-paper-* roots, and avoiding monolithic JSX.
- ▌ Tailwind Token Consolidation · millioncoUse when consolidating, deduping, or reducing the number of CSS custom properties / Tailwind v4 design tokens in a globals.css file. Triggers on requests like "reduce tokens", "standardize design tokens", "too many tokens", "dedupe globals.css", "shrink @theme inline", "collapse similar colors", or any task whose goal is fewer tokens while keeping the same visual result. Covers @theme inline, --color-* aliases, :root/.dark/.dashboard-page blocks, dead-token analysis, value-similar collapse, single-use inlining, and the Tailwind v4 arbitrary-value escape syntax.
- ▌ Slack Agent · millionco bundleUse when working on Slack agent/bot code, Chat SDK applications, or projects using `chat` and `@chat-adapter/slack`. Provides development patterns, testing requirements, and quality standards.
- ▌ Security Review · millioncoReview code for security issues in self-hosted and managed Vercel deployments of this Slack bot. Covers secrets, tokens, permissions, logs, user data handling, SSRF, and data minimization. Use when reviewing code for security, auditing data handling, checking for leaked secrets, or verifying privacy compliance.
- ▌ Fixing Accessibility · millioncoFix accessibility issues in UI components. Use when adding or changing buttons, links, inputs, menus, dialogs, tabs, dropdowns, forms, validation, error states, keyboard shortcuts, focus states, or icon-only controls.
- ▌ Animation Best Practices · millionco bundleCSS and UI animation patterns for responsive, polished interfaces. Use when implementing hover effects, tooltips, button feedback, transitions, or fixing animation issues like flicker and shakiness. Covers animation theory, CSS animations, Framer Motion, performance, accessibility, and real-world walkthrough patterns.
- ▌ Setup Matt Pocock Skills · millionco bundleSets up an `## Agent skills` block in AGENTS.md/CLAUDE.md and `docs/agents/` so the engineering skills know this repo's issue tracker (GitHub or local markdown), triage label vocabulary, and domain doc layout. Run before first use of `to-issues`, `to-prd`, `triage`, `diagnose`, `tdd`, `improve-codebase-architecture`, or `zoom-out` — or if those skills appear to be missing context about the issue tracker, triage labels, or domain docs.
- ▌ Budge · millionco bundleUse when making single-property CSS or Tailwind visual changes in Next.js App Router projects. Presents a floating control widget on the page so the user can tweak the value before it is persisted. Covers atomic style changes, live preview, and cleanup. Triggers on single CSS value or single Tailwind utility class modifications.
- ▌ CLI To JS · millioncoUse when wrapping CLI binaries in JavaScript, automating shell workflows in TypeScript, composing multiple CLIs into scripts, or building agent tool-use. Covers convertCliToJs, $command, $validate, $spawn, script(), .text()/.lines()/.json() output parsing.
- ▌ Ask Ben · millionco bundleSets a repository up with Million UI, governs how a UI change lands, and answers a design call from Ben's recorded decrees. Use when installing or migrating to Million UI, when creating or changing user-visible UI, or when making a design call.
- ▌ Effect Portable Patterns · millioncoPortable Effect patterns for robust promise execution. Use when wrapping async operations with timeouts, retries, tagged errors, caching, concurrency, pattern matching, or tracing - all designed to resolve to a plain Promise via Effect.runPromise.
- ▌ Vercel React Best Practices · millionco bundleReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
- ▌ Expect · millioncoUse when editing .tsx/.jsx/.css/.html, React components, pages, routes, forms, styles, or layouts. Also when asked to test, verify, validate, QA, find bugs, check for issues, or fix expect-cli failures.
- ▌ Code Review · millioncoPerform code reviews. Use when reviewing pull requests, examining code changes, or providing feedback on code quality. Covers security, performance, testing, and design review.
- ▌ Debug Agent · millioncoSystematic evidence-based debugging using runtime logs. Generates hypotheses, instruments code with NDJSON logs, guides reproduction, analyzes log evidence, and iterates until root cause is proven with cited log lines. Use when the user reports a bug, unexpected behavior, or asks to debug an issue.
- ▌ Skill Writing · millioncoWrite and improve agent skills (SKILL.md files). Use when creating new skills, refactoring existing ones, debugging why an agent ignores instructions, or improving compliance. Covers prompt structure, TDD for skills, description optimization, and rationalization bulletproofing.
- ▌ Effect Best Practices · millionco bundleEnforces Effect-TS patterns for services, errors, layers, and atoms. Use when writing code with Effect.Service, Schema.TaggedError, Layer composition, or effect-atom React components.
- ▌ Deslop · millioncoSimplify and refine recently modified code while preserving functionality. Use when asked to "deslop", "clean up code", "simplify code", or after making changes that could benefit from refinement.