Integration Grid Hero
+6Ink Ridge Herov1.0.3
Use this Skill to create ui visuals.
5.013 downloads2 likes3 saves
$4.99
What do I get when I buy this Skill?Ink Ridge Hero is a ready-to-paste hero section, delivered as editable source with its usage example. It ships with a canvas-rendered backdrop that runs without a WebGL library and state the visitor can change and see respond. Colour, type and radius live as tokens you edit once for the whole block.
Picked most often by
Updated Aug 31, 2026
Similar Skills
View all skills
What you get
- The full source for Ink Ridge Hero — the component file plus a runnable usage example, ready to paste and edit.
- A written visual contract: palette, type scale, radius, icon stroke and motion timings, all as tokens you edit in one place.
- The backdrop is drawn on a canvas from named constants — change the numbers to change the shape and palette.
Good fit
- You need a hero section and want a finished one rather than a blank canvas.
- You want the first screen to look complete on render, with imagery already placed.
- You want readable source you can edit, not another dependency to keep upgraded.
Not for
- Teams already running a mature design system — this palette and type scale will fight yours.
- Anyone wanting a versioned npm package; this hands you source to maintain yourself.
- Projects needing navigation, forms, auth or checkout — none of which this block covers.
Brand IdentityProduct Launch & App GrowthDigital Publications & Web PagesCreate UI VisualsBuild Website PageBuild Landing PageEditable OutputVisually PolishedBeginner-friendlyWarm NeutralTeal AccentGenerative Backdrop
About this Skill
You paste one block and the top of your page is finished — headline, supporting line, buttons and artwork already sitting right against each other. Nothing to lay out, nothing left grey.
What you get
- The full source for Ink Ridge Hero — the component file plus a runnable usage example, ready to paste and edit.
- A written visual contract: palette, type scale, radius, icon stroke and motion timings, all as tokens you edit in one place.
- The backdrop is drawn on a canvas from named constants — change the numbers to change the shape and palette.
How to use it
- Tell your assistant where the section goes and it reads your project first, then writes the block the way that project is already written.
- Replace the words with yours. The type sizes and spacing hold on their own.
- Change the accent colour in one place and the whole block follows.
- Look at it on a phone before you ship. It is already built to hold there.
What you need before you start
- Last tested
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
User reviews
Loading reviews…