Skip to content
Agent Aisle
Menu

Skills / design-motion-portfolio

design-motion-portfolio

Build or extend an animation-heavy, dark, editorial portfolio website (kinetic type, smooth scroll, scroll reveals) using this skill's component kit and design tokens. Use when the user asks for a motion-rich portfolio, studio or personal site in this style, or adds pages to a site already using this kit. Do not use for dashboards, docs sites, or minimal/corporate styles.

OfficialRuns scriptsAuditA
Author
agentsaisle
Latest
v0.1.0
Aisle
design, web
Works with
Claude Code, Codex, Cursor
Source
HazemSalah29/agentsaisle
Stars
2

Install

Install design-motion-portfolio

npx @agentsaisle/cli add design-motion-portfolio

Installs into your project's skills folder. Add --global to install it for every project.

Preview

Screenshots of a demo site built only from this skill's kit. They show the style, not a measured result.

  • Hero

    Hero

  • Statement and numbers

    Statement and numbers

  • Work gallery start

    Work gallery start

  • Work gallery scrolling

    Work gallery scrolling

  • Services hover

    Services hover

  • Contact and footer

    Contact and footer

  • Case study

    Case study

  • Menu overlay

    Menu overlay

  • About

    About

  • Work grid

    Work grid

  • Journal

    Journal

  • Contact

    Contact

  • Reduced motion

    Reduced motion

  • Phone hero

    Phone hero

  • Phone menu

    Phone menu

  • Phone work

    Phone work

Runs scriptsThis skill includes scripts

Your agent may run these scripts on your machine. A maintainer has read every one in full, and the CLI lists the files when you install. You can read them on GitHub first.

Read the files on GitHub

Audit

A
Critical
0
High
0
Medium
0
Low
0

47 files · audited 2026-10-29 · rules 1.0.0

No findings.

What this skill can use

Tools

  • Read
  • Write
  • Edit
  • Glob
  • Grep
  • Bash(node *)
  • Bash(npx playwright *)
  • Bash(pnpm *)
  • Bash(npm run *)

Scripts

  • assets/kit/BlogGrid.tsx
  • assets/kit/ContactCTA.tsx
  • assets/kit/Container.tsx
  • assets/kit/Footer.tsx
  • assets/kit/Grid.tsx
  • assets/kit/HeroKinetic.tsx
  • assets/kit/MagneticButton.tsx
  • assets/kit/Marquee.tsx
  • assets/kit/NavOverlay.tsx
  • assets/kit/PageEnter.tsx
  • assets/kit/ProjectCard.tsx
  • assets/kit/RevealText.tsx
  • assets/kit/Section.tsx
  • assets/kit/ServiceList.tsx
  • assets/kit/SiteShell.tsx
  • assets/kit/StatCounter.tsx
  • assets/kit/WorkGallery.tsx
  • assets/kit/index.ts
  • assets/kit/motion-features.ts
  • assets/kit/tokens.ts
  • assets/kit/use-motion-ok.ts
  • scripts/design-lint.mjs
  • scripts/install-kit.mjs
  • scripts/screenshot.mjs

Domains mentioned

None

Automated checks found no known risky patterns. This is not a guarantee of safety. How audits work · Read the rules

Show this grade in a README

The badge updates when the registry is rebuilt. Paste this Markdown into the README:

[![aisle audit](https://img.shields.io/endpoint?url=https%3A%2F%2Fagentsaisle-vercel.vercel.app%2Fbadges%2Fdesign-motion-portfolio.json)](https://agentsaisle-vercel.vercel.app/skills/design-motion-portfolio)

SKILL.md

Rendered from commit c04b139

Motion portfolio

Use when

  • New portfolio or studio site in this style, or new pages for a site that has DESIGN.md from this skill.

Don't use when

  • The project already follows another design system. Ask first.

Steps

  1. If src/components/kit/ is missing, run node <skill>/scripts/install-kit.mjs and confirm the files it wrote. It also writes DESIGN.md and perf.config.json (a 220 kB budget for the performance check) and tells you which packages to install.
  2. Read DESIGN.md (tokens, components, rules). Read references/components.md only for components you'll use.
  3. List the page's sections and map each to a kit component. If one is missing, extend the kit per references/extending-the-kit.md; never write one-off styled sections.
  4. Write copy specific to the user's content; leave [PLACEHOLDER] for facts you don't have.
  5. Animate only with kit components and motion tokens; transform and opacity only.
  6. Run node <skill>/scripts/design-lint.mjs, then the project's checks. Fix until clean.
  7. Run node <skill>/scripts/screenshot.mjs; look at the desktop and phone shots; fix visual issues.

Budget

  • Search first (grep, glob, symbol search). Read line ranges, not whole files.

  • Read at most 8 files per step. If you need more, write down what you learned and narrow the question.

  • Do not re-read a file you just wrote or edited.

  • Prefer the smallest command output that answers the question: head, tail, quiet flags, filtered lists.

  • Don't read kit source unless extending it; DESIGN.md documents each component's props.

Output

  • Changed files list, new kit components (if any), screenshot paths, check results. No recap of code.

Done when

  • design-lint passes, project checks pass, perf budget passes.
  • Screenshots reviewed at 1440 px and 390 px.
  • With reduced motion enabled, content is fully visible and readable.

Version history

VersionCommitInstall
0.1.0latestc04b139add design-motion-portfolio

Report this skillAgent Aisle on GitHub