marigameo/skills

Latest recorded source activity: November 4, 2026 at 01:32

SkillsMP catalog refreshed: November 12, 2026 at 12:52

skills collected: 6

GitHub stars: 0
GitHub forks: 0

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/marigameo/skills.

Repository README

Repository README source: README.md

Read the source README

Expand full README

# Skills for crafting components with coding agents Six skills, for designers and engineers who build UI with coding agents and don't want slop. I'm Mari, a design engineer. What's in here is what I picked up at work and from the design engineers who keep sharing their craft on X and the web, tested by building [agent-clarifier](https://github.com/marigameo/agent-clarifier), a clarifying-questions card for chat agents, with Claude Code as a pair: every decision planned first, built in reviewable pieces, judged on screen, stressed, audited, and logged. The process worked, so it's packaged here to reuse. ## Install ```bash npx skills@latest add marigameo/skills ``` Or as a Claude Code plugin: ``` /plugin marketplace add marigameo/skills /plugin install mari-skills@marigameo-skills ``` Or point your agent at a raw `SKILL.md` link. They're plain markdown. ## Why Agents build first and decide never. They pick a `#999` grey, a 300ms `ease-in` and a 6px radius because those look familiar, and nobody can say why any of them is right. The result works and feels like nothing. These skills put the decisions back in front of the code: what the thing is, which states it has, what each visual signal means, and a written reason for every default. The owner decides, the agent proposes, builds and verifies, and nothing is "done" until it has been looked at in light, dark and at phone width. ## Skills - **[craft-component](./skills/craft-component/SKILL.md)**: build a UI component the careful way. Brief, plan, sketch, milestones with tests that are proven to bite, a plain playground and a story demo the owner tries and gives feedback on until they freeze them, a slop check before every hand-over, then audits of the frozen version with external skills, review, simplify, release on a go. Its taste section holds only what those skills don't cover, and it grows as I learn. - **[ask-clarifier](./skills/ask-clarifier/SKILL.md)**: how to use agent-clarifier. Setup, placement, which question type for what, writing good questions, the tool definition that tells your model when to ask, theming, troubleshooting. - **[show-co-presence](./skills/show-co-presence/SKILL.md)**: how to use [co-presence](https://github.com/marigameo/co-presence). When it earns its place and when to leave it out, strip or card, feeding it a snapshot and events, mapping Claude Agent SDK hooks onto it, the `set_activity` tool that lets your model say what it's doing, writing labels, theming, troubleshooting. - **[draw-diagrams](./skills/draw-diagrams/SKILL.md)**: add diagrams to your own chat product, so the model draws a flow, a hand-off or a set of stages only when a picture explains better than prose, and users never see a broken one. A tool that decides when, guidance for the model, a server check on the real Mermaid parser, a renderer that hides failures, a considered light and dark theme, and an eval. Framework-neutral, with tested code to copy. It's built on what I learnt shipping a similar feature in [Strive AI's chat engine](https://mariappan.netlify.app/work/chat-diagrams/). - **[tune-search](./skills/tune-search/SKILL.md)**: make search as you type feel right and behave correctly: a typeahead in the header, a ⌘K palette, a live results page, and the layout and keyboard of pickers such as an org switcher. Your agent finds the search in your code, puts it through slow, failing and out-of-order networks in a real browser that judges every frame, fixes the causes in your own code, and proves the fix with the same twelve checks. Stale results, blinking spinners, panels that shrink or close under you, a highlight that jumps, the combobox contract, IME input and mobile keyboards. Feel the difference first in the [search lab](https://marigameo.github.io/search-lab/): the same search, naive and tuned, side by side. - **[fit-iphone-duo](./skills/fit-iphone-duo/SKILL.md)**: make a website work on iPhone Duo, Apple's foldable. Your agent audits the site in WebKit at the five sizes Safari 27.1 really gives a page and at the crease, fixes the causes in your own code, and proves the fix, with an optional look in real Safari on Xcode's simulator. Try your site in the [iPhone Duo playground](https://marigameo.github.io/iphone-duo-playground/) first: it shows the same sizes with Safari's bars and the crease drawn in. `craft-component` leans on [Emil Kowalski's skills](https://github.com/emilkowalski/skills) and [Jakub Krehel's](https://github.com/jakubkrehel/skills) for its audit step, by name and link. Install those too. ## Story mode `craft-component` has an optional story mode, off by default. When it's on, the build keeps a `JOURNAL.md` with one entry per round, and every round is snapshotted into `process/NN-name/`: the plan as it was, the renders, the audit report before any fix. Snapshots are never edited. I turn it on when a build is also going to be written up. The folder becomes the source for the story: how the problem was approached, what was tried and turned down, and what the effort actually was. A separate skill drafts the portfolio piece and the posts from it. For a component that only needs to exist, leave it off; the journal is enough. ## License MIT

Loading the repository README…

Posts

See all →

Mariappan Subramanian

@mariapp62431572Oct 31, 2026 09:36 UTC

Skill release postAudit websites

Post summary

Audits and fixes a website for Apple's iPhone Duo foldable across Safari 27.1 viewports and the crease, with an optional simulator check.

Original post

View Skill details · skills/skills-fit-iphone-duo

Skills in this repository

classification pending

skill

occupation

description

updated

tune-search

unclassified

Make search-as-you-type feel right and behave correctly: header typeahead dropdowns, ⌘K command palettes and live results pages. Finds each search in the code and the running app, audits it in a real browser that takes over the network (out of order, slow,…

2026-11-04

fit-iphone-duo

unclassified

Make a website work on iPhone Duo, Apple's book-style foldable, in Safari 27.1. Audits the site in WebKit at the five viewports Safari really gives a page (closed, closed wide, open, open tall, Split View) and at the crease, fixes the causes in the site's own…

2026-10-31

ask-clarifier

unclassified

Guide to agent-clarifier, the web component that lets a chat agent ask clarifying questions before it acts — install it, place it at the composer (replace or dock), wire the message box, write good questions, pick single, multi, text, a compose option or…

2026-10-25

craft-component

unclassified

Build a UI component the careful way — agree what it is before any code, build in reviewable milestones with tests that are proven to bite, hand the owner a plain playground and a story demo to try it in until they freeze them, then audit the frozen version…

2026-10-25

draw-diagrams

unclassified

Add Mermaid diagrams to your own chat product so the model draws only when a picture explains better than prose, and users never see a broken one. Covers the tool and the description that decides when to draw, runtime guidance for the model, a server gate on…

2026-10-25

show-co-presence

unclassified

Guide to co-presence, the web component that shows who is working on a shared goal, people and agents together, what each is doing right now, and anything waiting on you. Covers when it earns its place and when to leave it out, strip or card, feeding it a…

2026-10-25

Showing 6 of 6 collected skills.