A new skill released by designer Benji Taylor: enables agents to use React and CSS to create simplified interfaces that look like real products, such as those found in marketing page headers, feature cards, and documentation illustrations. These can be static illustrations or 10–16 second demo animations featuring cursor interactions. It includes a component library, dozens of examples, and recording scripts, allowing agents to capture the final output for self-review.
Security Audit: Not audited
- Not yet scanned
Rationale
- Plan before coding: Define position and dimensions (the author's reference suggests a header image next to copy is approximately 720 × 340, and cards are 400 × 300), then define the theme and fidelity, followed by writing 3–5 beats plus a result; if it fits in a mobile column, a separate compact version is also required.
- Start by copying from the closest "gold standard" example (static cards, AI chat, form errors, drag-and-drop sorting, chart dragging, table editing, etc.), use
node scripts/film.mjsto capture still frames and full sequences, and compare side-by-side with the example. - List common failures: overcrowding information, looking like wireframes, indenting the entire window with whitespace on all four sides of the card, giving all elements equal weight, and the cliché AI icon style of purple with sparkles; real text should only be placed where relevant to the story, typically in 3–7 places, with placeholder bars used elsewhere.
- The
kit/directory provides components such as Stage, Window, Phone, and cursor script Act; the skill directory specifies the MIT license. - This is the first inclusion on skills.sh, just 1 days ago, with 24 hours of installation time for 804 (representing attention level only).
Usage
- The installation command will appear after the audit passes; it triggers when asked to create product demo animations, feature card illustrations, or faux UIs.
- No account or external services are required; it needs React, react-dom, and lucide-react. Examples use
npm installandnpm run devfor preview.
Risks
- This release has not been audited, is fixed at C-level, and does not display the installation command; SKILL.md instructs agents to use npm to install dependencies and run the skill's bundled
film.mjsrecording script, but these scripts have not been scanned; the skills.sh page does not display SKILL.md or third-party audit results, so this review is based on the original GitHub content. - The examples include imitations of real product interfaces and real logos from Figma, Linear, Slack, Gmail, etc.; SKILL.md requires borrowing only the interactions, not the identity of other products; when used on your own pages, ensure it is not mistaken for a screenshot of another product.
- The repository was just released and has single-digit stars; the workflow is long (planning, filming, comparison, review, writing REHEARSAL.md), resulting in high token consumption.