Line liff
AI agent skills for LINE platform development — Messaging API, Login, LIFF, MINI App, and Notification Messages.
npx -y skills add abgne/line-dev --skill line-liffAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Comprehensive reference for LINE Front-end Framework (LIFF) SDK — building web apps inside LINE with authentication, messaging, QR scanning, permanent links, pluggable SDK, and LIFF plugin development. This skill should be used when the user asks to "build a LIFF app", "initialize liff.init()", "send messages from LIFF", "use Share Target Picker", "scan a QR code in LIFF", "create a permanent link", "develop a LIFF plugin", or mentions LIFF SDK, LINE Front-end Framework, CDN/npm integration, pluggable SDK tree-shaking, LIFF-to-LIFF transitions, LIFF browser vs external browser, Endpoint URL configuration, or server-side ID token verification from LIFF. Always use this skill whenever the user mentions LIFF, web apps inside LINE, or LINE Front-end Framework, even if they don't explicitly say "LIFF SDK".
SKILL.md
5.8 KB, as published. Nobody here has run it
LINE LIFF (Front-end Framework)
Do not answer LIFF questions from memory — LINE updates APIs frequently and training data is unreliable. Always consult the references below.
Reference for building, reviewing, and debugging LIFF web apps inside LINE.
Workflow
Build
- Read references/guidelines.md (registration, endpoint URL rules, environment compatibility)
- Load the relevant reference for the feature being implemented
- For architecture or design choices, consult references/experts.md for directional guidance
- Write code following specs and constraints from references
Review / Debug
- Read references/guidelines.md (URL constraints, authentication flow, API availability)
- Load relevant references for the code being reviewed
- Cross-check code against specs (endpoint URL rules, scope requirements, environment limitations, init order)
- For design pattern concerns, consult references/experts.md
- Report violations with reference to specific constraints
Environment Variables
LIFF_ID=LIFF app ID (from LINE Developers Console)
LINE_LOGIN_CHANNEL_ID=LINE Login Channel ID (for server-side JWT verification)
LINE_LOGIN_CHANNEL_SECRET=Channel secret (server-side only)
CHANNEL_ACCESS_TOKEN=Channel access token (for LIFF Server API — manage LIFF apps programmatically)
SDK
Install via CDN or npm. For tree-shaking (reduce ~34% bundle size), use pluggable SDK.
SDK installation, CDN/npm setup, pluggable SDK → references/api.md § Pluggable SDK
Initialization
liff.init({ liffId: 'YOUR_LIFF_ID', withLoginOnExternalBrowser: true })
.then(() => { /* use LIFF APIs */ })
.catch(err => console.error(err.code, err.message));
- Must be called before all LIFF APIs (except pre-init methods)
withLoginOnExternalBrowser: true— auto-trigger login in external browserliff.ready— Promise that resolves when init completes
Getting Started
- Create a LINE Login channel in LINE Developers Console
- Add a LIFF app and set the Endpoint URL (HTTPS required)
- Integrate SDK, call
liff.init() - Or scaffold with
npx @line/create-liff-app(React/Vue/Svelte/Next.js/Nuxt/vanilla)
API Reference
Complete API reference (methods, parameters, scopes, availability matrix) → references/api.md
View Sizes
| Type | Coverage |
|---|---|
| Full | 100% screen |
| Tall | ~75% |
| Compact | ~50% |
Key Constraints
- Endpoint URL:
liff.init()only works at or below the registered Endpoint URL - URL handling: modify URLs only after
liff.init()resolves - Universal Links: use
https://liff.line.me/{liffId}as primary entry point - Token security: send raw ID Token to server for verification, never expose decoded token → see server-auth.md
- Login behavior differs: auto in LIFF browser, manual in external browser
- Deprecated APIs:
liff.scanCode()→ usescanCodeV2();liff.getLanguage()→ usegetAppLanguage();liff.permanentLink.createUrl()→ usecreateUrlBy()(may be removed in v3)
Reference Index
| File | Topic |
|---|---|
| references/api.md | LIFF v2 API complete reference, pluggable SDK modules, error codes |
| references/guidelines.md | Registration, endpoint URL rules, authentication flow, UI/UX, environment compatibility |
| references/navigation.md | LIFF URLs, liff.state, permanent links, LIFF-to-LIFF transitions, browser minimization |
| references/plugins.md | LIFF plugin development, hooks system, official plugins (Inspector, Mock) |
| references/server-api.md | LIFF Server API (v1) — programmatic LIFF app CRUD (create, update, list, delete) |
| references/server-auth.md | Server-side ID Token (JWT) verification |
| references/cli.md | LIFF CLI — local HTTPS dev server, app CRUD, Inspector debugging, ngrok |
| references/experts.md | LIFF domain experts for architecture guidance |
SDK & Tools
- npm: @line/liff
- Pluggable SDK:
@line/liff/core+ individual modules - Official plugins: @line/liff-inspector | @line/liff-mock
- LIFF CLI: CLI tool (create, serve, deploy, HTTPS dev server)
- Create LIFF App:
npx @line/create-liff-app— scaffolding (React/Vue/Svelte/Next.js/Nuxt/vanilla, JS/TS) - LIFF Playground: liff-playground.netlify.app — online API testing
- Starter app: line/line-liff-v2-starter (vanilla/Next.js/Nuxt)