CtrlK
BlogDocsLog inGet started
Tessl Logo

building-landing-home

Compose a product or documentation home page from the @lobehub/ui/awesome landing components: LandingHero, AgentSkillCard, LogoMarquee, LandingSection, BentoGrid/BentoCard, CodeShowcase, FeatureGrid, InstallBanner and FluidGradient. Covers page structure, the lobedocs homePage hook, router links, theming the accent gradient, and a review checklist. Trigger on build a home page, landing page, docs home, marketing page, hero section, redesign home, lobedocs homePage, 首页, 落地页, 官网首页.

75

Quality

92%

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

88%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.

A high-quality skill body: dense, example-driven, with a complete executable scaffold, a clear page-assembly sequence, and a concrete review checklist that doubles as validation. The main gaps are the placeholder BentoGrid interior and the absence of local reference files for per-component and copy-rule detail, which currently leans on external documentation URLs.

Suggestions

Add one minimal BentoCard/CodeShowcase/FeatureGrid snippet (or a local reference file with one tile example each) so the placeholder '{/* BentoGrid of live tiles */}' can be replaced without consulting external docs.

Move the detailed 'AgentSkillCard content' and 'Copy and content rules' sections into a local reference file (e.g. references/copy-rules.md) linked from the body, keeping SKILL.md as a tighter overview.

DimensionReasoningScore

Conciseness

The body is lean and instructive throughout: a component table ("Wrap every middle band in it", "colSpan/rowSpan for emphasis"), terse copy rules ("one sentence, under 20 words, concrete... never 'powerful', 'seamless' or 'next-generation'"), and executable TSX with no padding. It never explains concepts Claude already knows (React, routing, CSS variables), matching the 5-anchor "every token earns its place" rather than 4, where over-explanation would still be present.

5 / 5

Actionability

The main scaffold is copy-paste ready (full LandingHero/LandingSection/InstallBanner TSX and a complete renderLink implementation with "pass one shared renderLink so internal links use the router"), plus concrete limits like "at most two hero actions" and "give the most expressive component colSpan={2} rowSpan={2}". It falls short of 5 because BentoGrid, CodeShowcase, and FeatureGrid appear only as table rows and the scaffold leaves "{/* BentoGrid of live tiles */}" as a placeholder, deferring those props to external doc URLs.

4 / 5

Workflow Clarity

The build sequence is explicit and numbered ("Default order... 1. LandingHero... 5. InstallBanner" with "Drop a band rather than filling it with filler"), wiring steps follow, and the "Review checklist" provides explicit validation checkpoints ("Every link resolves", "At 375px wide the hero stacks", "Nothing animates under prefers-reduced-motion"). This matches the 5-anchor's checklist-for-complex-processes criterion; no destructive or batch operations exist that would require a fix-and-retry loop or impose the cap at 3.

5 / 5

Progressive Disclosure

Structure is good: a component table, clear section headers, and a well-signaled one-level-deep delegation ("Read each one's page before using a prop you have not seen here: https://ui.lobehub.com/skills/components/awesome/<kebab-name>.md") that externalizes per-component prop detail. It is not 5 because the ~150-line body inlines detailed sections (AgentSkillCard content rules, full copy rules) that could live in local reference files, and navigation relies on external URLs rather than a bundled, discoverable reference set — matching the 4-anchor ("good structure; minor organization gaps") over the 3-anchor, since references are clearly signaled and nothing is buried.

4 / 5

Total

18

/

20

Passed

Description

96%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 states concrete capabilities in third person, names the exact component inventory and supporting topics, and closes with an explicit, multi-lingual trigger clause. The only weakness is that broadly-worded triggers ('home page', 'marketing page') create minor overlap risk with other web-building skills.

DimensionReasoningScore

Specificity

Quotes like "Compose a product or documentation home page from the @lobehub/ui/awesome landing components: LandingHero, AgentSkillCard, LogoMarquee..." and "Covers page structure, the lobedocs homePage hook, router links, theming the accent gradient, and a review checklist" enumerate nine concrete components and several concrete sub-tasks, matching the comprehensive multi-action anchor. It exceeds the 4-anchor ("several specific actions; minor gaps") because coverage spans components, wiring, theming, and validation with no obvious omission.

5 / 5

Completeness

The 'what' is explicit ("Compose a product or documentation home page from the ... landing components") and the 'when' is explicit ("Trigger on build a home page, landing page, docs home...") with concrete trigger phrases, matching the 5-anchor exactly. It is not a 4 because the 'when' clause is not merely present but enumerates specific user phrasings rather than a generic 'Use when working with...' statement.

5 / 5

Trigger Term Quality

"Trigger on build a home page, landing page, docs home, marketing page, hero section, redesign home, lobedocs homePage, 首页, 落地页, 官网首页" gives comprehensive natural-phrase coverage including synonyms (home page / docs home / marketing page), a product-specific term (lobedocs homePage), and multilingual variants. It fits the 5-anchor ("comprehensive coverage of natural terms including synonyms") rather than 4 because even likely user phrasings like "redesign home" and CJK terms are included.

5 / 5

Distinctiveness Conflict Risk

Component names and "lobedocs homePage" carve a clear niche, but broad triggers like "build a home page", "marketing page" and "hero section" could overlap with other site-building or UI skills, matching the 4-anchor ("mostly distinct; minor overlap risk with closely related skills"). It is not 5 because those generic landing/home triggers are not uniquely tied to @lobehub/ui; not 3 because the framework-specific terms anchor it well.

4 / 5

Total

19

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
lobehub/lobe-icons
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.