New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Redlamp Site

by pdcgomes in pdcgomes/redlamp

Map of redlamp.app, the Next.js website in web/: its stack and commands, its pages, the home page's sections with their anchors, components and content sources, the brand's Tailwind tokens and…

MPL-2.0Auto-check passedFrontend & Design

Install Redlamp Site

skills CLI
$ npx skills add pdcgomes/redlamp --skill redlamp-site -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install pdcgomes/redlamp redlamp-site --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/pdcgomes/redlamp.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/redlamp-site .claude/skills/redlamp-site && rm -rf skills-src

Use ~/.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/

Facts

Skill name
redlamp-site
GitHub stars
231
Token cost
~2.9k tokens
SKILL.md length
1,292 words
Files
3
Skills in repo
11
Repo updated
First seen
Licence
MPL-2.0

At a glance

Map of redlamp.app, the Next.js website in web/: its stack and commands, its pages, the home page's sections with their anchors, components and content sources, the brand's Tailwind tokens and…

  • Works in 4 steps: Put its copy in content/.ts if it's more… → Write components/sections/.tsx in the… → Place it in app/page.tsx, and link it… → …
  • Changing the website
  • SKILL.md covers Stack and commands, Pages (web/app/), The home page, top to bottom and Where things live, plus 4 more sections
  • Runs Python scripts from its folder; calls npm, git and mise

What it does

Redlamp Site is an agent skill from pdcgomes/redlamp. Map of redlamp.app, the Next.js website in web/: its stack and commands, its pages, the home page's sections with their anchors, components and content sources, the brand's Tailwind tokens and classes, how to add a section or page, how to check and screenshot it, and how to work alongside other sessions. Use when changing the website or its copy, adding a section or page to it, or answering how the site is built.

Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `capture-nudge.py` and `capture.py`).

It sits in Frontend & Design, covering CSS and styling. It works with Next.js, Tailwind CSS and npm. The repository describes itself as: A native, open-source RAW photo editor for Mac, iPad and iPhone that feels immediately familiar to Lightroom users. The licence is MPL-2.0.

When your agent uses it

  • Changing the website
  • Adding a section
  • Answering how the site is built

Example prompts

  • “/redlamp-site”

Requirements

  • Python 3
  • Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Put its copy in content/.ts if it's more than a heading and a paragraph. Inline Markdown renders through Inline.
  2. Write components/sections/.tsx in the shape of AIDisclosure.tsx
  3. Place it in app/page.tsx, and link it from the footer as /#name.
  4. A new page also needs its metadata, an opengraph-image.tsx, a line in sitemap.ts and a link in the footer, or in the header if there's room.

What it can do on your machine

Read from SKILL.md and the folder at commit 9587460. 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

    Ships script files (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • npm
    • git
    • mise
    • python3
    • pip
    • python
    • node
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, git, pip and npx, which can reach the network depending on how they are called.

    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

Redlamp Site loads about 2.9k tokens when it runs. Until then it costs about 107 tokens; SKILL.md has 1,292 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~107
When it runs · the whole SKILL.md, loaded when a task matches
~2.9k

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

The full file from pdcgomes/redlamp at commit 9587460, republished under its MPL-2.0 licence (© pdcgomes). 1,292 words, ~2,865 tokens.

Download SKILL.mdSave it as .claude/skills/redlamp-site/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
redlamp-site
description
Map of redlamp.app, the Next.js website in web/: its stack and commands, its pages, the home page's sections with their anchors, components and content sources, the brand's Tailwind tokens and classes, how to add a section or page, how to check and screenshot it, and how to work alongside other sessions. Use when changing the website or its copy, adding a section or page to it, or answering how the site is built.

redlamp.app (web/)

The website presents the README. Much of it is read from the repository when it builds; the rest is curated in web/content/. Start from this map rather than re-reading the site. web/README.md covers deployment and the relays the app posts to, and .cursor/rules/landing-page.mdc (attached when you touch web/) says what to update when the README changes.

Stack and commands

  • Next.js 16 (App Router), React 19, Tailwind CSS 4 and TypeScript, with marked for the blog and Vercel Web Analytics. Add no dependencies: the npm registry is unreachable from the sandbox, so only npm install --offline works.
  • Server components by default. "use client" only where there's interaction: MobileMenu, Lightbox, HeroShots, Gallery, YouTubeFilm, Comparison, CameraList, FilmTable, StarNudge, and the articles' interactive figures.
  • mise run site serves it on http://localhost:3000 (running npm ci first if node_modules is missing); mise run site -- build builds it.
  • Before every dev and build, scripts/sync-assets.mjs copies docs/images, docs/images/film and docs/brand, and the blog posts' images, into public/synced/ (gitignored).
  • Check with cd web && npm test && npm run typecheck && npm run build. Tests are lib/*.test.ts under node --test. Add scripts/roadmap-sync.py --check and scripts/camera-list.py --check when the README, tracker, comparison or cameras change.
  • Commits for site work are titled Site: …, or after the page (Cameras page: …), naming a tracker row and its issue when there is one.

Pages (web/app/)

RouteContent
/ (page.tsx)The home page's sections, in the order below
/comparedocs/lightroom-comparison.md through lib/comparison.ts; tracker IDs link to their issues (trackerIssues)
/camerasdocs/cameras.md through lib/cameras.ts
/cameras/testHow to run the camera bench: steps and screenshots in content/camera-bench.ts, counts from lib/cameras.ts
/performancedocs/performance/metrics.json and history.jsonl through lib/performance.ts, drawn by components/charts/
/blog, /blog/<slug>, /blog/feed.xmlcontent/blog/<slug>/index.md through lib/blog.ts; web/README.md has the front matter. Each post's card and its X and LinkedIn copy, and the blog room that tracks every post: .cursor/skills/redlamp-blog/SKILL.md
/articles, /articles/<slug>Technical articles: content/articles/<slug>/index.md through lib/articles.ts, with the blog's front matter and Markdown, and interactive figures from components/articles/ placed by <div data-figure="name"></div> lines (web/README.md, Articles)
/api/…The relays the app posts to, such as /api/feedback (lib/feedback.ts, lib/github-app.ts), described in web/README.md
/api/whats-newThe app's What's New feed, linked from no page: content/whats-new/<id>/index.md through lib/whats-new.ts; web/README.md has the front matter

Each page exports metadata (title, description, canonical, Open Graph and Twitter; cameras/page.tsx is a compact example), and most have an opengraph-image.tsx drawn with next/og (see compare/). layout.tsx holds the header, the footer, the lamp glow, Inter with its optical-size axis and the default metadata (en-GB). sitemap.ts lists the pages; next.config.ts has the security headers and the /appcast.xml redirect.

The home page, top to bottom

Components are in components/sections/. Content without a file named is an export of content/features.ts.

SectionAnchorComponentContent
Hero: status pill, buttons, badges, shots, and the star nudgeHero.tsx, HeroShots.tsx, site/StarNudge.tsxheroShots; the release from lib/github.ts
Why Redlamp#whyStory.tsx (Story)Written in the component
Principles#principlesStory.tsx (Principles)principles
Command palette#command-paletteCommandPalette.tsxcommandPalette, paletteSteps
Features, a row each#features, and each feature's idFeatures.tsx (Features)features, focusStacking
Performance stripFeatures.tsx (Performance)docs/performance/
Everything that works today#everythingFeatures.tsx (EverythingToday)The README's What works today (lib/readme.ts)
Film looks#filmFilms.tsx, FilmTable.tsxcontent/films.ts
Gallery#galleryGallery.tsxgallery
Roadmap, and the comparison summary#roadmapRoadmap.tsx, ComparisonSummary.tsxThe README's roadmap, the tracker and the comparison
Introducing Redlamp, the film#watchWatchFilm.tsxfilm in lib/site.ts
AI disclosure#aiAIDisclosure.tsxaiDisclosure in content/ai.ts
Open source, build from source, Homebrew, Product Hunt#open-sourceOpenSource.tsxlib/site.ts

The header (components/site/SiteHeader.tsx) shows its links from the sm breakpoint up, and MobileMenu.tsx shows the same links below it. They're absolute (/#roadmap) so they work from every page. The bar is full, so a new home-page section is linked from the footer's Project list (SiteFooter.tsx) instead.

Where things live

  • lib/site.ts: every external string and link (site.github, readme, license, film, productHunt, homebrew, buildFromSource), and repoLink, which turns a README-relative link into a GitHub one.
  • lib/repo.ts: reads repository files from .. at build time. Each path is spelled out so the build traces it, so a new file needs its own RepoFile case. sourceCommit() gives the commit for the "Read at commit …" lines.
  • lib/readme.ts, tracker.ts, comparison.ts, cameras.ts, performance.ts and blog.ts parse those files, each with tests. Files the tests load use relative imports only.
  • lib/github.ts: the star count, the latest release and the tracker's issues, refreshed hourly. Each falls back (no count, the releases page, no issue links) when GitHub doesn't answer, so builds work offline. In the agent sandbox, build with NODE_USE_ENV_PROXY=1 for the build to reach GitHub through the proxy.
  • components/site/StarNudge.tsx: once per browser tab, and never with Reduce Motion, energy gathers behind the hero's lamp while it trembles, shoots in an arc into the header's GitHub button, and a sign drops from under the button on a rope. The elements it moves carry data-star-nudge in Hero.tsx and SiteHeader.tsx; the sign's physics is lib/hanging-sign.ts. Open the home page in a new tab to see it again. docs/brand/star-nudge.md documents it, how to reuse it and its known issues, and capture-nudge.py regenerates that page's images and checks the sign at both widths.
  • components/ui/: SectionHeading (eyebrow, h2 and intro), LinkButton (one primary per page, the rest secondary), Badge, the glyphs in Buttons.tsx, Inline, Lightbox, StatusMark, YouTubeFilm and ProductHuntCard.
  • Inline renders the README's inline Markdown: bold, italics, code and links. Links go through repoLink, so docs/x.md becomes a GitHub link and a site path such as /compare breaks; write those in JSX.
  • components/brand/Logo.tsx: Lockup, Mark and AppIcon.
Show full SKILL.md (432 more words)Show less

Look and voice

  • Tailwind 4 @theme tokens in app/globals.css. Colours: wall, wall-raised, bakelite, bakelite-hi, steel, safelight, safelight-deep, filament, ring, paper, ink, mute, dim, hairline, hairline-strong. Radii: card, pill. Animations: warm-up, rise, breathe, fade-in.
  • Classes: .font-display (headings), .eyebrow, .surface (cards), .glass (the header), .shot (screenshots), .button-primary and .button-secondary, .post (the blog's Markdown) and .lamp-glow.
  • Text is text-paper for headings and emphasis, text-mute for body and text-dim for footnotes and sources. Inline links: text-paper underline decoration-hairline-strong underline-offset-3.
  • Red is light, once per view (docs/brand/README.md): the lamp glow, the mark and the one primary button. Never a flat red fill.
  • Copy is in the brand voice: calm, plain and precise, with no exclamation marks or superlatives, and only claims the README makes. Spelling is British (colour; licence for the noun), but product names such as Color Mixer stay as they are. In JSX text, write &apos;.
  • Write for a reader who has none of the context: not the chats, the tracker or the other sessions. Every term (a sidecar, plan mode, the tracker, a DEC row, a branch, another session's feature) is explained where it first appears, or left out.

Adding a home-page section

  1. Put its copy in content/<name>.ts if it's more than a heading and a paragraph. Inline Markdown renders through Inline.

  2. Write components/sections/<Name>.tsx in the shape of AIDisclosure.tsx:

    tsx
    <section id="name" className="scroll-mt-24 px-6 py-24">
  <div className="mx-auto max-w-6xl">
    <SectionHeading eyebrow="…" title="…">Intro.</SectionHeading>
    <div className="mt-10 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      <div className="surface p-6">
        <h3 className="font-display text-[18px] text-paper">…</h3>
        <p className="mt-2 text-[14px] leading-relaxed text-mute">…</p>
      </div>
    </div>
  </div>
</section>

    A section that starts a new topic takes py-24; one that continues the section above takes pb-24. scroll-mt-24 keeps its anchor clear of the sticky header.

  3. Place it in app/page.tsx, and link it from the footer as /#name.

  4. A new page also needs its metadata, an opengraph-image.tsx, a line in sitemap.ts and a link in the footer, or in the header if there's room.

Seeing it

After npm run build, serve the site with npx next start --port 3123 (in the background), then capture an element at a desktop width (1440 px) and a phone width (390 px):

bash
python3 -m venv /tmp/rl-site-shot && /tmp/rl-site-shot/bin/pip install --quiet playwright
/tmp/rl-site-shot/bin/python .cursor/skills/redlamp-site/capture.py http://localhost:3123/ '#ai' /tmp/rl-site-shot/ai

capture.py drives the installed Google Chrome with the flags the agent sandbox needs, so Playwright downloads no browser, and it reports any horizontal overflow. In the capture of a tall element, the sticky header can appear partway down: that's how the screenshot is stitched, not the layout.

Alongside other sessions

During an agent wave, AGENTS.md keeps web/ off limits, and other sessions often have site work in flight. Before a larger change, look for it in the other worktrees:

bash
for wt in $(git worktree list --porcelain | awk '/^worktree /{print $2}'); do
  git -C "$wt" status --short -- web; git -C "$wt" log --oneline main..HEAD -- web
done

© pdcgomes, MPL-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files in .cursor/skills/redlamp-site of pdcgomes/redlamp.

  • SKILL.md
  • capture-nudge.py
  • capture.py

Open the folder on GitHubat commit 9587460

Compare with similar skills

Redlamp Site 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.

Redlamp Site compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Redlamp Site this skillpdcgomes/redlamp231—~2.9kAutomated safety check: PassMPL-2.0
Stream Builderadrianhajdin/react-native-lingua152—~5.4kAutomated safety check: NotesNone
Aceternity UIsecondsky/claude-skills227—~4.7kAutomated safety check: PassMIT
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT
Design StyleCastor6/tactus3761 repos~2.1kAutomated safety check: PassApache-2.0
Opensource UIbidyut10/opensourceui720—~1.1kAutomated safety check: PassMIT

Similar skills

  • Stream Builder

    adrianhajdin/react-native-lingua

    Build a new app or add Stream products (Chat, Video, Feeds, Moderation) to an existing app.

    152 GitHub stars~5.4k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check: notes

  • Aceternity UI

    secondsky/claude-skills

    100+ animated React components (Aceternity UI) for Next.js with Tailwind.

    227 GitHub stars~4.7k tokensUpdated 13 days ago
    Frontend & DesignAuto-check passed

  • Coss

    crafter-station/petdex

    Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.

    4.2k GitHub stars~1.4k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Design Style

    Castor6/tactus

    A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

    376 GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

  • Opensource UI

    bidyut10/opensourceui

    Use Opensource UI patterns and copy-paste React/Next.js components from opensourceui.in.

    720 GitHub stars~1.1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Design Taste Frontend

    alisamadiii/Portfolio

    Senior UI/UX Engineer. An agent skill from alisamadiii/Portfolio.

    180 GitHub starsUsed in 6 repos~5.3k tokens
    Frontend & DesignAuto-check passed

More from pdcgomes/redlamp

All 11 skills in this repo

  • Redlamp Bench

    pdcgomes/redlamp

    Redlamp Bench, the way an agent asks the owner to do a step in another app and gets the results back without anyone moving files.

    231 GitHub stars~2.1k tokensUpdated today
    Auto-check passed

  • Redlamp Manual

    pdcgomes/redlamp

    The Redlamp User Manual (docs/manual), a dense, book-style PDF for photographers, typeset from Markdown and a print style sheet by Chrome, with its ranges, defaults and shortcuts generated from the…

    231 GitHub stars~2.8k tokensUpdated today
    Auto-check passed

  • Redlamp Promo Studio

    pdcgomes/redlamp

    The promo studio, which makes Redlamp's short promotional videos for social feeds the way a small creative agency does - a brief, hooks and copy, a script on a music grid, visuals from the promo…

    231 GitHub stars~2k tokensUpdated today
    Auto-check passed

  • Redlamp Blog

    pdcgomes/redlamp

    The blog room, where every redlamp.app blog post is tracked from idea to announcement in a canvas the owner marks as they post.

    231 GitHub stars~2.1k tokensUpdated today
    Auto-check passed

  • Redlamp Press

    pdcgomes/redlamp

    The press room, where every outlet Redlamp is pitched to (newsletters, Mac and photography sites, developer and open-source communities, lists and directories) is tracked from finding it to its…

    231 GitHub stars~1.3k tokensUpdated today
    Auto-check passed

  • Redlamp Release

    pdcgomes/redlamp

    The release room, where every Redlamp release is prepared, checked, approved and shipped.

    231 GitHub stars~3.8k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Redlamp Site

What does Redlamp Site do?

Map of redlamp.app, the Next.js website in web/: its stack and commands, its pages, the home page's sections with their anchors, components and content sources, the brand's Tailwind tokens and…. Redlamp Site is an agent skill from pdcgomes/redlamp.js website in web/: its stack and commands, its pages, the home page's sections with their anchors, components and content sources, the brand's Tailwind tokens and classes, how to add a section or page, how to check and screenshot it, and how to work alongside other sessions.

When should I use Redlamp Site?

Redlamp Site fits situations like: changing the website; adding a section; answering how the site is built.

How do I install Redlamp Site in Claude Code?

Run `npx skills add pdcgomes/redlamp --skill redlamp-site -a claude-code`. Or copy the skill folder (.cursor/skills/redlamp-site in pdcgomes/redlamp) into .claude/skills/redlamp-site in your project. Claude Code loads it when a task matches its description.

How do I install Redlamp Site in Codex?

Run `npx skills add pdcgomes/redlamp --skill redlamp-site -a codex`. Or copy the skill folder (.cursor/skills/redlamp-site in pdcgomes/redlamp) into .agents/skills/redlamp-site in your project. Codex loads it when a task matches its description.

Can I use Redlamp Site 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 pdcgomes/redlamp --skill redlamp-site -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/redlamp-site, .gemini/skills/redlamp-site, .github/skills/redlamp-site and .opencode/skills/redlamp-site in your project.

What does Redlamp Site need to run?

Going by SKILL.md and its folder, Redlamp Site needs Python for the scripts in its folder and the command-line tools its instructions call (npm, git, mise, python3, pip and python). Our summary lists: Python 3; Node.js.

Does Redlamp Site access the network?

SKILL.md contains no URLs. Its commands use npm, git, pip and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Redlamp Site 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 Redlamp Site use?

Redlamp Site is published under the MPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Redlamp Site use?

About 2.9k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Redlamp Site?

Skills that share tags, products or a category with Redlamp Site: Stream Builder (adrianhajdin/react-native-lingua, 152 stars), Aceternity UI (secondsky/claude-skills, 227 stars), Coss (crafter-station/petdex, 4.2k stars) and Design Style (Castor6/tactus, 376 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Redlamp Site?

pdcgomes (a GitHub user) maintains it in pdcgomes/redlamp, which has 231 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 11, 2026.

Source: pdcgomes/redlamp on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.