agent-skills

Generate UI mockups as standalone HTML pages using the Sailwind design token system. Use this skill when asked to create mockups, prototypes, or HTML previews for an app or feature — given a text description (app spec, PRD, feature brief) and/or a reference screenshot/image. Produces coherent multi-page HTML mockups styled exclusively from the Sailwind design tokens (colors, typography, spacing, gradients). Do NOT use the frontend-design skill for these tasks.

Create animated product vignettes — short, cinematic HTML demos that showcase a product feature or workflow using GSAP animations. Use this skill when asked to build a vignette, product theater animation, animated demo, product walkthrough, cinematic UI demo, or GSAP-based product showcase. Also use when asked to animate a UI scene, create a camera-driven demo, or build a beat-scripted animation sequence.

Analyze a frontend codebase for design token discrepancies against Sailwind tokens, generate a TPS report, apply fixes, and create a PR for human review. Use this skill when asked to audit design tokens, align styles with the design system, or create a TPS report. Works with Less, CSS, and TSX/JSX files.

Migrate an existing local git repository to a GitLab instance by creating a new remote repo and updating the origin. Use when a user wants to publish or move a project to GitLab (e.g., gitlab.example.com), create a new GitLab repo from an existing local repo, or update the git remote origin to point to GitLab instead of GitHub or another host.

Guide for querying Sailwind design tokens using the Mint CLI. Use when looking up colors, typography, spacing, or semantic tokens for UI components in this project.

Guide users through installing and configuring pnpm for the Sailwind project, including new project setup and migration from npm. Use this skill when users: (1) Ask how to install dependencies or set up the project, (2) Get errors related to missing pnpm or wrong package manager (ERR_PNPM_ errors, "This project is configured to use pnpm" warnings), (3) Say they're new to pnpm or ask about the switch from npm, (4) Have an existing project with a package-lock.json and want to migrate to pnpm, (5) Ask "how do I get started" or "how do I set this up"

Create sophisticated economic data analyses and visualizations for higher education stakeholders using FRED (Federal Reserve Economic Data). Use this skill when users request: (1) Analysis of student loan debt, unemployment by education level, or earnings data, (2) Dashboard or visual presentations of higher ed economic indicators, (3) Narrative reports on higher education ROI or economic value, (4) Data-driven communications for institutional stakeholders (trustees, enrollment management, financial aid offices), or (5) Integration of FRED API data into interactive visualizations.

Guide for spec-based agent-driven development using structured requirements (EARS notation), technical design documentation, and implementation planning. Use when users want to build features using a specification-first approach, need to document requirements formally, want to generate implementation plans from specs, or when working on projects that benefit from clear requirement-to-code traceability.