{"_id":"@arsyadcc/skills","_rev":"2-5d493b549be8eef968608e31e48697a2","name":"@arsyadcc/skills","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@arsyadcc/skills","version":"1.0.0","keywords":["claude","claude-code","agent-skills","claude-plugin","design","design-engineering","animation","accessibility","typography"],"author":{"name":"Arsyad Fadly","email":"m@arsyad.cc"},"license":"MIT","_id":"@arsyadcc/skills@1.0.0","maintainers":[{"name":"arsyadcc","email":"m@arsyad.cc"}],"homepage":"https://github.com/arsyadcc/skills#readme","bugs":{"url":"https://github.com/arsyadcc/skills/issues"},"dist":{"shasum":"e1abb19081b479af36dc3da95e21f90412fd3258","tarball":"https://registry.npmjs.org/@arsyadcc/skills/-/skills-1.0.0.tgz","fileCount":47,"integrity":"sha512-d/l3MTmajka8K0W8E9zyOZbtqvYSHs8hZCVytVCXX1BQUMlq+bl24/06eK1RVTmdUe74xdHRQv1xm6dvhKg6ww==","signatures":[{"sig":"MEYCIQCRUYNaHV3Tm8Cf3yjylodWPk3li4ME5SXQyfTCho3wUAIhAJZ8KoaKiINKq1y5Zdry9UY6G7Fa5Tw5R5SUAec4EpfI","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":344378},"gitHead":"c5fb9aa95bddbf9925219b551bbe4d2066b8341f","_npmUser":{"name":"arsyadcc","email":"m@arsyad.cc"},"repository":{"url":"git+https://github.com/arsyadcc/skills.git","type":"git"},"_npmVersion":"11.9.0","description":"Agent skills for product designers building interfaces with a craft bar — accessibility, color, typography, layout, motion, and Swift.","directories":{},"_nodeVersion":"24.14.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/skills_1.0.0_1787417377139_0.09025987150681525","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@arsyadcc/skills","version":"1.0.1","description":"Agent skills for product designers building interfaces with a craft bar — accessibility, color, typography, layout, motion, and Swift.","license":"MIT","author":{"name":"Arsyad Fadly","email":"m@arsyad.cc"},"homepage":"https://github.com/arsyadcc/skills#readme","repository":{"type":"git","url":"git+https://github.com/arsyadcc/skills.git"},"bugs":{"url":"https://github.com/arsyadcc/skills/issues"},"keywords":["claude","claude-code","agent-skills","claude-plugin","design","design-engineering","animation","accessibility","typography"],"gitHead":"0e814ec6f4d251fcd1e97982eeda6da36f6bd2ea","_id":"@arsyadcc/skills@1.0.1","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-02dQg8hJRtx+WjHF3PslKIB+gJk8zG4T+DnBz8dXpzUOmNLRpByh4Vn3H8HovxIWm68xif0Y/m1QD+I9YkJp9Q==","shasum":"bc3285ebeff7e2b110d2f236b9c978e2705bd5ce","tarball":"https://registry.npmjs.org/@arsyadcc/skills/-/skills-1.0.1.tgz","fileCount":47,"unpackedSize":343601,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDQc7iMv9UtpCA9Q5A9xVecXQgNrU2jACOGnoT6IO0nhwIgXLcnRoRJ24sexz/q4Wz4tbdWQYtoia/s7aC/y5pRczc="}]},"_npmUser":{"name":"arsyadcc","email":"m@arsyad.cc"},"directories":{},"maintainers":[{"name":"arsyadcc","email":"m@arsyad.cc"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/skills_1.0.1_1787418343269_0.20671740587387655"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-22T16:49:36.954Z","modified":"2026-08-22T17:05:43.638Z","1.0.0":"2026-08-22T16:49:37.342Z","1.0.1":"2026-08-22T17:05:43.451Z"},"bugs":{"url":"https://github.com/arsyadcc/skills/issues"},"author":{"name":"Arsyad Fadly","email":"m@arsyad.cc"},"license":"MIT","homepage":"https://github.com/arsyadcc/skills#readme","keywords":["claude","claude-code","agent-skills","claude-plugin","design","design-engineering","animation","accessibility","typography"],"repository":{"type":"git","url":"git+https://github.com/arsyadcc/skills.git"},"description":"Agent skills for product designers building interfaces with a craft bar — accessibility, color, typography, layout, motion, and Swift.","maintainers":[{"name":"arsyadcc","email":"m@arsyad.cc"}],"readme":"# Skills for Product Designers\n\n[![npm](https://img.shields.io/npm/v/@arsyadcc/skills?color=cb3837&logo=npm)](https://www.npmjs.com/package/@arsyadcc/skills)\n[![license](https://img.shields.io/npm/l/@arsyadcc/skills?color=0a7)](LICENSE)\n\nA collection of agent skills for product designers who build with an agent.\n\nAgents write plausible interfaces. Plausible is the problem: an `ease-in` dropdown, a hit area two pixels too small, a gray ramp that collapses in dark mode, a modal that animates from `scale(0)`. Each one passes review and none of them feel right. These skills carry the taste — exact curves, exact ratios, exact thresholds — so the agent builds to a craft bar instead of to an average.\n\nFifteen skills across interface foundations, motion, and implementation.\n\n## Install\n\n```bash\nnpx skills@latest add arsyadcc/skills --all\n```\n\nAll fifteen, into the current project. Add `-g` for `~` instead, or `--skill animate --skill colors` to pick individual ones.\n\nWorks in Claude Code and about twenty other agents — Cursor, Codex, Cline, Amp, OpenCode.\n\n## The skills\n\nMost run on their own — the agent loads one when your request matches its description. Three are marked **manual**: they only run when you invoke them by name.\n\n### Interface foundations\n\n| Skill | For |\n| --- | --- |\n| `accessibility` | Keyboard paths, focus rings, screen readers, hit areas, form errors, reduced motion |\n| `colors` | Palette generation, ramps, light/dark theming, contrast (APCA and WCAG), token naming |\n| `typography` | Typeface pairing, type scales, line-height, measure, wrapping, truncation, OpenType |\n| `layout` | Structure, grouping, alignment, spacing, breakpoints, progressive disclosure, RTL |\n| `interface` | Routes a screen through all four domains above and returns one ranked verdict |\n\nEach domain skill owns its rules and hands off what it doesn't own — `colors` measures a contrast pair, `accessibility` decides whether it must pass. Every one ends in a findings table with severity, location, before/after, and a `Block` or `Approve` verdict.\n\n### Motion\n\n| Skill | For |\n| --- | --- |\n| `animate` | Build a web animation from scratch — gate, purpose, tool, properties, curve, interruption |\n| `animate-expo` | The same for React Native and Expo — Reanimated, gestures, haptics, the UI thread |\n| `apple-design` | Apple's physical motion translated to the web — springs, velocity handoff, rubber-banding, materials |\n| `review-animations` | **manual** · Review motion against a strict craft bar. Approval is earned |\n| `improve-animations` | Audit a codebase's motion and write self-contained plans another agent can execute |\n| `find-animation-opportunities` | Find what should animate but doesn't — and reject everything that shouldn't |\n| `animation-vocabulary` | \"The bouncy thing when a popover opens\" → *Pop in*. Names an effect so you can ask for it |\n\nThe motion skills share one bar, drawn from [Emil Kowalski's](https://emilkowal.ski/) design engineering work. They agree on the curves, the durations, and when the right answer is no animation at all.\n\n### Building\n\n| Skill | For |\n| --- | --- |\n| `prototype` | **manual** · Build several genuinely different versions behind a picker, flip through them live, promote the winner |\n| `pick-ui-library` | **manual** · Curated picks for toasts, command menus, charts, drag and drop, virtualization, state |\n| `write-swift` | Modern Swift — value types, Swift 6 concurrency, generics, ARC, Swift Testing |\n\n## How to use them\n\nJust describe what you want. The agent picks the skill.\n\n> \"Build the empty state for the projects list\"\n> → `layout` and `typography` load on their own\n\n> \"Make this drawer feel good\"\n> → `animate` runs the gate first, and will tell you not to animate it if that's the honest answer\n\nInvoke a manual skill by name:\n\n> `/prototype` a pricing card\n> `/review-animations`\n> `/pick-ui-library` I need a command menu\n\nSome skills take arguments. `improve-animations` accepts `quick`, `deep`, a category (`performance`, `easing`), `plan <description>`, `execute <plan>`, or `reconcile`.\n\n## What these skills won't do\n\nThey stop rather than guess. `animate` produces zero lines of code when the thing shouldn't animate — a keyboard shortcut, anything seen a hundred times a day. `find-animation-opportunities` expects to reject most candidates. Review skills mark a check they couldn't run as `Not verified` instead of asserting a pass, and never claim coverage they didn't inspect.\n\nThat refusal is the point. An agent that says yes to everything is how interfaces end up over-animated and under-considered.\n\n## Contributing\n\n`CLAUDE.md` holds the conventions — structure, frontmatter, house voice, and the checks to run before you commit.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}