git404hub

what is skills fr?

mengto/skills — explained in plain English

Analysis updated 2026-05-18

2,481HTMLAudience · designerComplexity · 2/5Setup · easy

tl;dr

A library of reusable agent skill files that teach AI coding assistants proven, repeatable workflows for building web design and animation.

vibe map

mindmap
  root((Agent Skills))
    What it does
      Reusable AI skill files
      Design and animation recipes
      Video-to-prompt workflows
    Tech stack
      HTML
      Markdown SKILL.md
      GSAP, Three.js, Tailwind
    Use cases
      Build landing pages
      Recreate designs from video
      Add scroll animations
    Audience
      Designers
      Frontend developers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Turn a screen recording of a design into a detailed prompt an AI agent can build in one shot

VIBE 2

Load a reusable skill for building a landing page, pricing page, or scroll animation

VIBE 3

Convert an existing HTML page into reusable prompts for individual sections or effects

VIBE 4

Give Claude, Codex, or Cursor a consistent, versioned playbook instead of a one-off chat prompt

what's the stack?

HTMLCSSJavaScriptMarkdownGSAPThree.jsTailwind CSS

how it stacks up fr

mengto/skillsisjiamu/gzh-design-skillyyx990803/build-your-own-mint
Stars2,4812,4292,538
LanguageHTMLHTMLHTML
Last pushed2022-12-10
MaintenanceDormant
Setup difficultyeasyeasymoderate
Complexity2/52/53/5
Audiencedesignerwritervibe coder

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

No installation, copy the relevant SKILL.md folder into your agent's skills directory or reference it directly.

in plain english

Skills is a large collection of ready made instruction files, called agent skills, meant to be used with AI coding assistants like Claude, Codex, and Cursor when someone is building websites, landing pages, and animated interfaces. Instead of writing a fresh prompt every time you want an AI to build a similar type of page or effect, each skill packages up a proven way of doing that task once, so you can reuse it again and again. Each skill is a small, self contained folder with a required file describing exactly what the task is, when to use it, and the steps the AI agent should follow, plus optional supporting files like example images, helper scripts, and background articles. Most skills also include a working sample page and a matching prompt so you can see, and even recreate, the result the skill is meant to produce. The collection is organized into a few main groups. One set focuses on turning a screen recording of a design or animation into a very detailed prompt an AI can use to recreate it as a finished webpage in one attempt. Another large group covers specific web design building blocks, such as pricing pages, landing pages, scroll based animations, and three dimensional or WebGL visual effects, each with its own step by step instructions and reference material. There is also a smaller set of general purpose Codex workflows for things like drafting support emails or generating voiceovers, and a design prompting system that walks through choosing layout, color, and type before generating anything. The project's overall philosophy is that good prompts and design decisions should be saved as reusable files rather than typed out fresh every time, and that specific, well defined instructions produce far more consistent results than vague requests. This tool is aimed at designers, frontend developers, and anyone building websites or interfaces with the help of an AI coding agent, and using it well means being comfortable working with markdown files, HTML, and whichever AI tool you plug the skills into.

prompts (copy fr)

prompt 1
Load the video-to-superprompt skill and turn this screen recording into a detailed build prompt.
prompt 2
Use the landing-page skill from this repo to build me a hero section with the same structure.
prompt 3
Show me how to apply the gsap skill to add scroll-triggered animations to my page.
prompt 4
Walk me through the folder structure I need to add my own custom skill to this collection.

Frequently asked questions

what is skills fr?

A library of reusable agent skill files that teach AI coding assistants proven, repeatable workflows for building web design and animation.

What language is skills written in?

Mainly HTML. The stack also includes HTML, CSS, JavaScript.

How hard is skills to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is skills for?

Mainly designer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.