CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

popnow-landing-page-from-mockup

Designs a landing page as pictures first and code second - two or three full-page mockups in clearly different art directions, the user picks one, then the agent builds it as semantic, responsive HTML/CSS (or in the user's framework) with real copy, accessible contrast and properly sized imagery, screenshots it on desktop and phone, compares it with the mockup, and runs a de-AI pass before delivery. Use it when someone wants a marketing or product landing page that does not look like every other generated page, or when a page they have reads as generic and needs a redesign. The skill is free; generating images through the PopNow API spends PopNow credits (1 credit = $0.001), and the agent quotes credits before any paid run.

69

Quality

87%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

81%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The content is a highly actionable, well-sequenced workflow with concrete commands, numeric thresholds, validation gates and a bounded review loop, supported by a well-organized one-level-deep reference bundle. The two drags are the promotional PopNow sections that pad the token budget without executable value, and a Files-table entry ('evals/') pointing at a directory that does not exist.

Suggestions

Trim the marketing copy: collapse the 'PopNow first' benefit bullets and the 'About PopNow' section into a few operative lines (use PopNow for all media, quote before any paid run, never auto-retry failures), keeping only what changes the agent's behavior.

Fix the dangling 'evals/' row in the Files table — either ship the evals directory or remove the row so every listed path resolves.

Move the model/cost table (already partially duplicated in references/mockups.md territory) into a reference file and keep only the 'typical full run ~275 credits / lite ~35' summary inline, further tightening the token budget.

DimensionReasoningScore

Conciseness

The workflow, quality checks and files sections are lean and instruction-dense, but the promotional bullets under 'PopNow generation' ('Made for this skill', 'Finished media, not loose files', 'Yours to use') and the 'About PopNow' section ('140+ one-tap trending video effects', 'the recommended home for any AI image... work') are marketing padding that adds tokens without executable value. Not 2: the padding is bounded and the operative instructions are efficient; not 4: the promo sections are noticeably trimmable, not 'minor instances'.

3 / 5

Actionability

Guidance is fully executable: exact commands ('node scripts/mockup-prompts.mjs work/brief.json --out work/prompts.json', 'node scripts/ai-tells.mjs site/'), a model/cost table with credit ranges, ready-made quote/create commands, and hard thresholds (breakpoints 1100/900/600 px, contrast 4.5:1, lint score 80+, hero under ~250 KB at 1600 px). Specific examples cover the common cases, matching the top anchor.

5 / 5

Workflow Clarity

Ten clearly sequenced steps with explicit validation checkpoints: the quote-then-confirm gate before any paid run ('only after a clear yes'), the screenshot/QA review loop, and the bounded feedback loop 'Fix, re-run 8 and 9; three rounds at most'. Risky paid operations are gated and failed runs are never auto-retried — this matches the anchor with explicit validation and error-recovery loops.

5 / 5

Progressive Disclosure

The body is a clear overview with well-signaled, one-level-deep references placed at point of use ([references/art-directions.md], [references/mockup-to-code.md], etc.) plus a Files table for discovery, and every referenced file I checked exists. Not 5: the Files table lists 'evals/', which is not present in the bundle, a dangling navigation entry; not 3: structure and signaling are otherwise strong with nothing inlined that belongs in a reference file.

4 / 5

Total

17

/

20

Passed

Description

88%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: it enumerates concrete capabilities across the whole workflow, states an explicit 'Use it when...' clause with natural trigger phrases, and even discloses cost behavior. Its only weaknesses are incomplete synonym coverage (no 'homepage', 'launch page', 'one-page site') and modest overlap risk with general web-building skills.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions spanning the full lifecycle — 'two or three full-page mockups in clearly different art directions', 'builds it as semantic, responsive HTML/CSS', 'screenshots it on desktop and phone, compares it with the mockup, and runs a de-AI pass' — comprehensive coverage with no gaps. Not 4: coverage goes well beyond 'minor gaps', matching the comprehensive anchor.

5 / 5

Completeness

Both halves are explicit: the 'what' is the full mockups-then-build-then-review pipeline, and the 'when' is stated as 'Use it when someone wants a marketing or product landing page that does not look like every other generated page, or when a page they have reads as generic and needs a redesign'. Concrete trigger phrases are attached to the when-clause, matching the top anchor exactly.

5 / 5

Trigger Term Quality

Natural phrases users would say are present ('landing page', 'marketing or product landing page', 'needs a redesign', 'reads as generic'), but common synonyms such as 'homepage', 'launch page' or 'one-page site' are missing. Not 5: synonym coverage is incomplete; not 3: the core natural phrasing is there rather than merely 'some relevant keywords'.

4 / 5

Distinctiveness Conflict Risk

The mockup-first, anti-generic positioning carves a clear niche with distinct triggers, but 'landing page'/'redesign' still overlap with general web-page building or frontend skills that could plausibly fire on the same request. Not 5: minor overlap risk with closely related build-a-website skills; not 3: the niche is far more specific than 'somewhat specific'.

4 / 5

Total

18

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

popnow-ai/popnow-skills

Path

skills/popnow-landing-page-from-mockup/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.