Animated React Component Libraries
Hainrixz/editor-pro-max
Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.
Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, with all icons sourced from Iconify.
Install Redesign My Landingpage
$ npx skills add instructa/agent-skills --skill redesign-my-landingpage -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install instructa/agent-skills redesign-my-landingpage --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/instructa/agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design/redesign-my-landingpage .claude/skills/redesign-my-landingpage && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "redesign-my-landingpage" agent skill from https://github.com/instructa/agent-skills/tree/main/skills/design/redesign-my-landingpage into .claude/skills/redesign-my-landingpage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "redesign-my-landingpage", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/instructa/agent-skills/tree/main/skills/design/redesign-my-landingpageType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add instructa/agent-skills --skill redesign-my-landingpage -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install instructa/agent-skills redesign-my-landingpage --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/instructa/agent-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design/redesign-my-landingpage .agents/skills/redesign-my-landingpage && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "redesign-my-landingpage" agent skill from https://github.com/instructa/agent-skills/tree/main/skills/design/redesign-my-landingpage into .agents/skills/redesign-my-landingpage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "redesign-my-landingpage", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add instructa/agent-skills --skill redesign-my-landingpage -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install instructa/agent-skills redesign-my-landingpage --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/instructa/agent-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design/redesign-my-landingpage .cursor/skills/redesign-my-landingpage && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "redesign-my-landingpage" agent skill from https://github.com/instructa/agent-skills/tree/main/skills/design/redesign-my-landingpage into .cursor/skills/redesign-my-landingpage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "redesign-my-landingpage", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/instructa/agent-skills.git --path skills/design/redesign-my-landingpage--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add instructa/agent-skills --skill redesign-my-landingpage -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install instructa/agent-skills redesign-my-landingpage --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/instructa/agent-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design/redesign-my-landingpage .gemini/skills/redesign-my-landingpage && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "redesign-my-landingpage" agent skill from https://github.com/instructa/agent-skills/tree/main/skills/design/redesign-my-landingpage into .gemini/skills/redesign-my-landingpage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "redesign-my-landingpage", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install instructa/agent-skills redesign-my-landingpageInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add instructa/agent-skills --skill redesign-my-landingpage -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/instructa/agent-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design/redesign-my-landingpage .github/skills/redesign-my-landingpage && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "redesign-my-landingpage" agent skill from https://github.com/instructa/agent-skills/tree/main/skills/design/redesign-my-landingpage into .github/skills/redesign-my-landingpage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "redesign-my-landingpage", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add instructa/agent-skills --skill redesign-my-landingpage -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install instructa/agent-skills redesign-my-landingpage --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/instructa/agent-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design/redesign-my-landingpage .opencode/skills/redesign-my-landingpage && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "redesign-my-landingpage" agent skill from https://github.com/instructa/agent-skills/tree/main/skills/design/redesign-my-landingpage into .opencode/skills/redesign-my-landingpage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "redesign-my-landingpage", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
redesign-my-landingpage- GitHub stars
- 139
- Token cost
- ~1.8k tokens
- SKILL.md length
- 846 words
- Files
- 9 (incl. references, assets)
- Skills in repo
- 17
- Repo updated
- First seen
- Licence
- None found
At a glance
Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, with all icons sourced from Iconify.
- Works in 5 steps: Identify the single primary conversion… → Draft the page using the anatomy below. → Nail above-the-fold first (title,… → …
- The user asks for a landing page
- SKILL.md covers Quick start, Default stack and rules, Core landing page anatomy and Above-the-fold checklist, plus 8 more sections
- Calls npm
What it does
Redesign My Landingpage is an agent skill from instructa/agent-skills. Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, with all icons sourced from Iconify. Use when the user asks for a landing page, sales page, signup page, CRO improvements, above-the-fold vs below-the-fold structure, hero + CTA copy, section order, or wants production-ready shadcn + Vite code.
Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 13 other files, including reference files and assets (for example `README.md`, `references/aesthetic-directions.md` and `references/copy-templates.md`).
It sits in Frontend & Design, covering Landing pages, Design systems and CSS and styling. It works with shadcn/ui, Vite, Tailwind CSS and React. The repository describes itself as: A curated collection of agent-skills.
When your agent uses it
- The user asks for a landing page
- CRO improvements
- Above-the-fold vs below-the-fold structure
- Hero + CTA copy
Example prompts
- “/redesign-my-landingpage”
Requirements
- Node.js
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Identify the single primary conversion action (the one CTA that matters).
- Draft the page using the anatomy below.
- Nail above-the-fold first (title, subheadline, visual, proof, CTA).
- Use below-the-fold to remove doubt (features, proof, FAQ, repeat CTA).
- Implement in shadcn + Tailwind with a distinctive, intentional aesthetic.
What it can do on your machine
Read from SKILL.md and the folder at commit d49c149. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
icon-sets.iconify.design
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Redesign My Landingpage loads about 1.8k tokens when it runs, and up to ~7.3k if it reads all its reference files. Until then it costs about 104 tokens; SKILL.md has 846 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 846 words (~1,794 tokens).
“If the user provides an existing page, run the same checklist as an audit and propose specific fixes and A/B tests.”
- name
- redesign-my-landingpage
Files
SKILL.md and 8 other files (references, assets) in skills/design/redesign-my-landingpage of instructa/agent-skills.
- SKILL.md
- README.md
- assets/vite-shadcn-iconify-landing/src/pages/LandingPage.tsx
- references/aesthetic-directions.md
- references/copy-templates.md
- references/iconify.md
- references/landing-page-anatomy.md
- references/section-templates.md
- references/shadcn-vite-setup.md
Open the folder on GitHubat commit d49c149
Compare with similar skills
Redesign My Landingpage next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Redesign My Landingpage this skillinstructa/agent-skills | 139 | — | ~1.8k | Automated safety check: Pass | None | |
| Animated React Component LibrariesHainrixz/editor-pro-max | 264 | 1 repos | ~5.7k | Automated safety check: Pass | Custom licence | |
| Tailwind V4 Shadcnever-works/ever-works | 162 | 2 repos | ~3.8k | Automated safety check: Pass | MIT | |
| Atlaspacifio/ui | 154 | — | ~2.5k | Automated safety check: Pass | MIT | |
| Shadcn Tailwind UILiarMTTT/TavernWeave | 154 | — | ~1.7k | Automated safety check: Pass | Custom licence | |
| Oma Frontendfirst-fluke/oh-my-agent | 1.3k | — | ~2.5k | Automated safety check: Pass | MIT |
Similar skills
Tailwind V4 Shadcn
ever-works/ever-works
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.
Atlas
pacifio/ui
Atlas — a design language and UI guide system for agent interfaces.
Shadcn Tailwind UI
LiarMTTT/TavernWeave
Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.
Oma Frontend
first-fluke/oh-my-agent
Frontend specialist for React, Next.js, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment.
Vite Shadcn Tailwind4
IgorWarzocha/Opencode-Workflows
Initialize shadcn/ui + Tailwind CSS v4 in Vite projects (Vite-specific, not Next.js/Remix).
More from instructa/agent-skills
All 17 skills in this repoApp Spec Packager
instructa/agent-skills
A skill your agent uses when the user wants to turn an application, product, startup idea, SaaS, mobile app, web app, API, AI product, or internal tool into a production-ready Markdown specification…
Codex Reviewer
instructa/agent-skills
Have Codex review a feature or change from Claude Code, then let Claude address the findings and request verification.
Search Context
instructa/agent-skills
Find, clone, inspect, and summarize high-quality GitHub reference repositories for coding agents.
Secleak Check
instructa/agent-skills
Run or install repo security leak checks with BetterLeaks and Trivy.
Delegate Fable
instructa/agent-skills
Delegate a bounded task from a Codex session to a Fable-powered Cursor Agent in the same Herdr workspace, then wait for and collect the result.
Delegate Grok
instructa/agent-skills
Delegate a bounded task from a Codex session to Grok 4.6 with xhigh reasoning in the same Herdr workspace, then wait for and collect the result.
Related
Works with
Categories
Questions about Redesign My Landingpage
What does Redesign My Landingpage do?
Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, with all icons sourced from Iconify. Redesign My Landingpage is an agent skill from instructa/agent-skills. Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, with all icons sourced from Iconify.
When should I use Redesign My Landingpage?
Redesign My Landingpage fits situations like: the user asks for a landing page; CRO improvements; above-the-fold vs below-the-fold structure; hero + CTA copy.
How do I install Redesign My Landingpage in Claude Code?
Run `npx skills add instructa/agent-skills --skill redesign-my-landingpage -a claude-code`. Or copy the skill folder (skills/design/redesign-my-landingpage in instructa/agent-skills) into .claude/skills/redesign-my-landingpage in your project. Claude Code loads it when a task matches its description.
How do I install Redesign My Landingpage in Codex?
Run `npx skills add instructa/agent-skills --skill redesign-my-landingpage -a codex`. Or copy the skill folder (skills/design/redesign-my-landingpage in instructa/agent-skills) into .agents/skills/redesign-my-landingpage in your project. Codex loads it when a task matches its description.
Can I use Redesign My Landingpage in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add instructa/agent-skills --skill redesign-my-landingpage -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/redesign-my-landingpage, .gemini/skills/redesign-my-landingpage, .github/skills/redesign-my-landingpage and .opencode/skills/redesign-my-landingpage in your project.
What does Redesign My Landingpage need to run?
Going by SKILL.md and its folder, Redesign My Landingpage needs the command-line tools its instructions call (npm). Our summary lists: Node.js.
Does Redesign My Landingpage access the network?
SKILL.md names 1 domain. As links in the text: icon-sets.iconify.design. This is read from the text; nothing was executed.
Is Redesign My Landingpage safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Redesign My Landingpage use?
No licence was found for Redesign My Landingpage or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Redesign My Landingpage use?
About 1.8k tokens (SKILL.md is roughly 7.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.5k tokens, read only when the agent opens those files.
What are the alternatives to Redesign My Landingpage?
Skills that share tags, products or a category with Redesign My Landingpage: Animated React Component Libraries (Hainrixz/editor-pro-max, 264 stars), Tailwind V4 Shadcn (ever-works/ever-works, 162 stars), Atlas (pacifio/ui, 154 stars) and Shadcn Tailwind UI (LiarMTTT/TavernWeave, 154 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Redesign My Landingpage?
instructa (a GitHub organization) maintains it in instructa/agent-skills, which has 139 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on September 28, 2026.
Source: instructa/agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.