{"id":51694397,"url":"https://github.com/mocchalera/web-visual-section-mock","last_synced_at":"2026-07-16T04:04:17.662Z","repository":{"id":371477688,"uuid":"1294594265","full_name":"mocchalera/web-visual-section-mock","owner":"mocchalera","description":"Agent Skill for section-based WEB/LP visual mock art direction","archived":false,"fork":false,"pushed_at":"2026-07-15T06:02:58.000Z","size":168,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-15T08:08:16.536Z","etag":null,"topics":["agent-skill","art-direction","codex-skill","japanese-typography","landing-page","web-design"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mocchalera.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-07-09T03:33:04.000Z","updated_at":"2026-07-15T06:03:09.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/mocchalera/web-visual-section-mock","commit_stats":null,"previous_names":["mocchalera/web-visual-section-mock"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/mocchalera/web-visual-section-mock","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mocchalera%2Fweb-visual-section-mock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mocchalera%2Fweb-visual-section-mock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mocchalera%2Fweb-visual-section-mock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mocchalera%2Fweb-visual-section-mock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mocchalera","download_url":"https://codeload.github.com/mocchalera/web-visual-section-mock/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mocchalera%2Fweb-visual-section-mock/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35529753,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-16T02:00:06.687Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent-skill","art-direction","codex-skill","japanese-typography","landing-page","web-design"],"created_at":"2026-07-16T04:04:16.683Z","updated_at":"2026-07-16T04:04:17.656Z","avatar_url":"https://github.com/mocchalera.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# web-visual-section-mock\n\nAgent Skill for high-quality WEB / LP visual mock art direction with section-by-section image generation, Japanese typography, intentional main visual archetype selection, and clean implementation asset regeneration. It freezes whether art owns the section field, floats on the Web background, or lives inside a real content frame before generation, then separates real text/CSS/SVG from full-field scenes, transparent scenes, clean backgrounds, and card artwork plates.\n\n## Package structure\n\n```text\nweb-visual-section-mock/\n  SKILL.md\n  references/\n    00_reference_index.md\n    01_web_section_patterns.md\n    02_web_layout_patterns.md\n    03_graphic_composition_patterns.md\n    04_japanese_typography_patterns.md\n    05_color_lighting_fashion_patterns.md\n    06_industry_tone_patterns.md\n    07_negative_examples.md\n    08_prompt_templates.md\n    09_main_visual_archetypes.md\n    10_visual_decomposition_for_web_build.md\n    11_layered_asset_generation_and_reconstruction.md\n    web_visual_agent_references_all.md\n  assets/\n    brief_template.md\n    output_examples.md\n```\n\n## Install\n\nDownload this repository as a ZIP, or create a ZIP from the `web-visual-section-mock/` folder, then upload it as an Agent Skill.\n\nThe package must contain a single top-level folder with one `SKILL.md` manifest and its supporting `references/` and `assets/` files.\n\n## Main use cases\n\n- Create image generation prompts for WEB / LP visual mockups\n- Split a full landing page into section-by-section images\n- Design hero, problem, benefit, features, pricing, FAQ, CTA, and footer visuals\n- Use person-led visuals as a strong default while intentionally switching to other motifs when stronger\n- Decompose reference comps into layer stack, full-bleed/container elements, alignment bases, and asset strategy before prompt writing\n- Regenerate only raster-required parts as copy-space-aware full-field scene plates, clean background plates, transparent foreground/scenes, or contained card artwork; keep readable text and CSS/SVG-rebuildable parts out of raster output\n- Apply Japanese typography patterns\n- Avoid cropped section screenshots and overstuffed page images\n- Diagnose weak or cheap-looking image prompts\n\n## Core principle\n\n```text\n1 image = 1 section = 1 clear message.\nNever compress a whole WEB page into one image.\nChoose one main visual archetype per section.\nUse person-led visuals as a strong default hook; switch to another motif only when it is more intentional.\nWhen uncertain, choose whitespace or split the section.\nWhen layered output is requested, use the composite as reference only, classify every element before generation, and reject cropped, masked, contaminated, or multi-part raster outputs.\n```\n\n## Validation\n\nThis is an instruction-only skill: no scripts, runtime dependencies, binaries, or generated assets are required.\n\nSee `PACKAGE_VALIDATION.md` for the current package check summary.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmocchalera%2Fweb-visual-section-mock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmocchalera%2Fweb-visual-section-mock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmocchalera%2Fweb-visual-section-mock/lists"}